Navigation - Skeleton

Bar

Contents

import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';

export default function Default() {
  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Books', href: '#', icon: BookIcon },
    { label: 'Movies', href: '#', icon: PopcornIcon },
    { label: 'Television', href: '#', icon: TvIcon },
  ];
  let anchorBar = 'btn hover:preset-tonal flex-col items-center gap-1';

  return (
    <div className="w-[375px] h-[667px] grid grid-rows-[1fr_auto] border border-surface-200-800">
      <div className="flex justify-center items-center">
        <p>Contents</p>
      </div>
      <Navigation layout="bar">
        <Navigation.Menu className="grid grid-cols-4 gap-2">
          {links.map((link) => {
            const Icon = link.icon;
            return (
              <a key={link.label} href={link.href} className={anchorBar}>
                <Icon className="size-5" />
                <span className="text-xs">{link.label}</span>
              </a>
            );
          })}
        </Navigation.Menu>
      </Navigation>
    </div>
  );
}

Recommended for small sized screens (ex: mobile).
Ideal for vertical screen layouts.
Should be fixed to the bottom of the viewport.
Supports 3-5 tiles based on contents and viewport width.
Consider progressive enhancement with the Virtual Keyboard API.

Rail

Contents

import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { SkullIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';

export default function Default() {
  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Books', href: '#', icon: BookIcon },
    { label: 'Movies', href: '#', icon: PopcornIcon },
    { label: 'Television', href: '#', icon: TvIcon },
  ];
  let anchorRail = 'btn hover:preset-tonal aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5';

  return (
    <div className="w-full h-[728px] grid grid-cols-[auto_1fr] border border-surface-200-800">
      <Navigation layout="rail">
        <Navigation.Header>
          <a href="/" className={anchorRail} title="View Homepage" aria-label="View Homepage">
            <SkullIcon className="size-8" />
          </a>
        </Navigation.Header>
        <Navigation.Content>
          <Navigation.Menu>
            {links.map((link) => {
              const Icon = link.icon;
              return (
                <a key={link.label} href={link.href} className={anchorRail}>
                  <Icon className="size-5" />
                  <span className="text-xs">{link.label}</span>
                </a>
              );
            })}
          </Navigation.Menu>
        </Navigation.Content>
        <Navigation.Footer>
          <a href="/settings" className={anchorRail} title="Settings" aria-label="Settings">
            <SettingsIcon className="size-5" />
          </a>
        </Navigation.Footer>
      </Navigation>
      <div className="flex justify-center items-center">
        <p className="opacity-50">Contents</p>
      </div>
    </div>
  );
}

Recommended for medium sized screens (ex: tablet).
Ideal for horizontal screen layouts.
Should be fixed to the left or right of the viewport.
Supports 3-7 tiles based on contents and viewport height.

Sidebar

entertainment

recreation

Contents

import { Navigation } from '@skeletonlabs/skeleton-react';
import { BikeIcon } from 'lucide-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { MountainIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { SailboatIcon } from 'lucide-react';
import { SettingsIcon } from 'lucide-react';
import { SkullIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';
import { WavesIcon } from 'lucide-react';

export default function Default() {
  const linksSidebar = {
    entertainment: [
      { label: 'Books', href: '#', icon: BookIcon },
      { label: 'Movies', href: '#', icon: PopcornIcon },
      { label: 'Television', href: '#', icon: TvIcon },
    ],
    recreation: [
      { label: 'Biking', href: '#', icon: BikeIcon },
      { label: 'Sailing', href: '#', icon: SailboatIcon },
      { label: 'Hiking', href: '#', icon: MountainIcon },
      { label: 'Swimming', href: '#', icon: WavesIcon },
    ],
  };
  let anchorSidebar = 'btn hover:preset-tonal justify-start px-2 w-full';

  return (
    <div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
      <Navigation layout="sidebar" className="grid grid-rows-[auto_1fr_auto] gap-4">
        <Navigation.Header>
          <a href="https://www.skeleton.dev" className="btn-icon btn-icon-lg preset-filled-primary-500">
            <SkullIcon className="size-6" />
          </a>
        </Navigation.Header>
        <Navigation.Content>
          <Navigation.Group>
            <Navigation.Menu>
              <a href="/" className={anchorSidebar}>
                <HouseIcon className="size-4" />
                <span>Home</span>
              </a>
            </Navigation.Menu>
          </Navigation.Group>
          {Object.entries(linksSidebar).map(([category, links]) => (
            <Navigation.Group key={category}>
              <Navigation.Label className="capitalize pl-2">{category}</Navigation.Label>
              <Navigation.Menu>
                {links.map((link) => {
                  const Icon = link.icon;
                  return (
                    <a key={link.label} className={anchorSidebar} title={link.label} aria-label={link.label}>
                      <Icon className="size-4" />
                      <span>{link.label}</span>
                    </a>
                  );
                })}
              </Navigation.Menu>
            </Navigation.Group>
          ))}
        </Navigation.Content>
        <Navigation.Footer>
          <a href="/" className={anchorSidebar} title="Settings" aria-label="Settings">
            <SettingsIcon className="size-4" />
            <span>Settings</span>
          </a>
        </Navigation.Footer>
      </Navigation>
      <div className="flex justify-center items-center">
        <p className="opacity-50">Contents</p>
      </div>
    </div>
  );
}

Recommended for large sized screens (ex: desktop).
Ideal for horizontal screen layouts.
Should be fixed to the left or right of the viewport.
Supports multiple groups of links for deep navigation.
Supports a label field per each group.
Can scroll vertically if contents extend beyond the viewport height.

Toggle Layout

Using reactive state we can dynamically switch between multiple layouts. Tap the double arrow icon to toggle.

Contents

import { Navigation } from '@skeletonlabs/skeleton-react';
import { BookIcon } from 'lucide-react';
import { HouseIcon } from 'lucide-react';
import { PopcornIcon } from 'lucide-react';
import { TvIcon } from 'lucide-react';
import { ArrowLeftRightIcon } from 'lucide-react';
import { useState } from 'react';

export default function Default() {
  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Books', href: '#', icon: BookIcon },
    { label: 'Movies', href: '#', icon: PopcornIcon },
    { label: 'Television', href: '#', icon: TvIcon },
  ];

  const buttonClasses = 'btn hover:preset-tonal';
  let anchorRail = `${buttonClasses} aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5`;
  let anchorSidebar = `${buttonClasses} justify-start px-2 w-full`;

  let [layoutRail, setLayoutRail] = useState(true);

  function toggleLayout() {
    setLayoutRail(!layoutRail);
  }

  return (
    <div className="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
      <Navigation layout={layoutRail ? 'rail' : 'sidebar'} className={layoutRail ? '' : 'grid grid-rows-[1fr_auto] gap-4'}>
        <Navigation.Content>
          <Navigation.Menu>
            {links.map((link) => {
              const Icon = link.icon;
              return (
                <a key={link.label} className={layoutRail ? anchorRail : anchorSidebar}>
                  <Icon className={layoutRail ? 'size-5' : 'size-4'} />
                  <span className={layoutRail ? 'text-[10px]' : ''}>{link.label}</span>
                </a>
              );
            })}
          </Navigation.Menu>
        </Navigation.Content>
        <Navigation.Footer>
          <button type="button" className={layoutRail ? anchorRail : anchorSidebar} onClick={toggleLayout}>
            <ArrowLeftRightIcon className={layoutRail ? 'size-5' : 'size-4'} />
            {!layoutRail ? <span>Resize</span> : ''}
          </button>
        </Navigation.Footer>
      </Navigation>
      <div className="flex justify-center items-center">
        <p className="opacity-50">Contents</p>
      </div>
    </div>
  );
}

API Reference

Root

bg-surface-100-900 overflow-x-hidden transition-[width] duration-200 data-[layout=bar]:w-full data-[layout=bar]:p-2 data-[layout=rail]:w-[100px] data-[layout=rail]:h-full data-[layout=rail]:overflow-y-hidden data-[layout=rail]:p-2 data-[layout=rail]:flex data-[layout=rail]:flex-col data-[layout=rail]:gap-4 data-[layout=sidebar]:w-[280px] data-[layout=sidebar]:h-full data-[layout=sidebar]:overflow-y-auto data-[layout=sidebar]:p-4

Property	Default	Type
`layout`	bar	"bar" \| "rail" \| "sidebar" \| undefined Sets the data-layout attribute, which modifies the visual presentation of the component set.
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Header

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"header">) => Element) \| undefined Render the element yourself

Content

data-[layout=rail]:contents data-[layout=sidebar]:space-y-4

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Group

data-[layout=rail]:contents data-[layout=sidebar]:flex flex-col gap-2

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Label

text-xs text-surface-700-300

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Footer

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"footer">) => Element) \| undefined Render the element yourself