Navigation - Skeleton

Bar

Contents

<script lang="ts">
  import BikeIcon from '@lucide/svelte/icons/bike';
  import BookIcon from '@lucide/svelte/icons/book';
  import HouseIcon from '@lucide/svelte/icons/house';
  import TreePalmIcon from '@lucide/svelte/icons/tree-palm';
  import { Navigation } from '@skeletonlabs/skeleton-svelte';

  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Entertainment', href: '#', icon: BookIcon },
    { label: 'Recreation', href: '#', icon: BikeIcon },
    { label: 'Relaxation', href: '#', icon: TreePalmIcon },
  ];
  let anchorBar = 'btn hover:preset-tonal flex-col items-center gap-1';
</script>

<div class="w-[375px] h-[667px] grid grid-rows-[1fr_auto] border border-surface-200-800">
  <div class="flex justify-center items-center">
    <p>Contents</p>
  </div>
  <!-- --- -->
  <Navigation layout="bar">
    <Navigation.Menu class="grid grid-cols-4 gap-2">
      {#each links as link (link)}
        {@const Icon = link.icon}
        <a href={link.href} class={anchorBar}>
          <Icon class="size-5" />
          <span class="text-[10px]">{link.label}</span>
        </a>
      {/each}
    </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

<script lang="ts">
  import BikeIcon from '@lucide/svelte/icons/bike';
  import BookIcon from '@lucide/svelte/icons/book';
  import HouseIcon from '@lucide/svelte/icons/house';
  import SettingsIcon from '@lucide/svelte/icons/settings';
  import SkullIcon from '@lucide/svelte/icons/skull';
  import TreePalmIcon from '@lucide/svelte/icons/tree-palm';
  import { Navigation } from '@skeletonlabs/skeleton-svelte';

  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Entertainment', href: '#', icon: BookIcon },
    { label: 'Recreation', href: '#', icon: BikeIcon },
    { label: 'Relaxation', href: '#', icon: TreePalmIcon },
  ];
  let anchorRail = 'btn hover:preset-tonal aspect-square w-full max-w-[84px] flex flex-col items-center gap-0.5';
</script>

<div class="w-full h-[640px] grid grid-cols-[auto_1fr] border border-surface-200-800">
  <!-- --- -->
  <Navigation layout="rail">
    <Navigation.Header>
      <a href="/" class={anchorRail} title="View Homepage" aria-label="View Homepage">
        <SkullIcon class="size-8" />
      </a>
    </Navigation.Header>
    <Navigation.Content>
      <Navigation.Menu>
        {#each links as link (link)}
          {@const Icon = link.icon}
          <a href={link.href} class={anchorRail}>
            <Icon class="size-5" />
            <span class="text-xs">{link.label}</span>
          </a>
        {/each}
      </Navigation.Menu>
    </Navigation.Content>
    <Navigation.Footer>
      <a href="/settings" class={anchorRail} title="Settings" aria-label="Settings">
        <SettingsIcon class="size-5" />
      </a>
    </Navigation.Footer>
  </Navigation>
  <!-- --- -->
  <div class="flex justify-center items-center">
    <p class="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

relaxation

Contents

<script lang="ts">
  import BedDoubleIcon from '@lucide/svelte/icons/bed-double';
  import BikeIcon from '@lucide/svelte/icons/bike';
  import BookIcon from '@lucide/svelte/icons/book';
  import BubblesIcon from '@lucide/svelte/icons/bubbles';
  import HouseIcon from '@lucide/svelte/icons/house';
  import MountainIcon from '@lucide/svelte/icons/mountain';
  import PopcornIcon from '@lucide/svelte/icons/popcorn';
  import SailboatIcon from '@lucide/svelte/icons/sailboat';
  import SettingsIcon from '@lucide/svelte/icons/settings';
  import SkullIcon from '@lucide/svelte/icons/skull';
  import TreePalmIcon from '@lucide/svelte/icons/tree-palm';
  import TvIcon from '@lucide/svelte/icons/tv';
  import { Navigation } from '@skeletonlabs/skeleton-svelte';

  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 },
    ],
    relaxation: [
      { label: 'Lounge', href: '#', icon: TreePalmIcon },
      { label: 'Spa', href: '#', icon: BubblesIcon },
      { label: 'Sleep', href: '#', icon: BedDoubleIcon },
    ],
  };

  let anchorSidebar = 'btn hover:preset-tonal justify-start px-2 w-full';
</script>

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

Layout: Rail

<script lang="ts">
  import ArrowLeftRightIcon from '@lucide/svelte/icons/arrow-left-right';
  import BikeIcon from '@lucide/svelte/icons/bike';
  import BookIcon from '@lucide/svelte/icons/book';
  import HouseIcon from '@lucide/svelte/icons/house';
  import TreePalmIcon from '@lucide/svelte/icons/tree-palm';
  import { Navigation } from '@skeletonlabs/skeleton-svelte';

  const links = [
    { label: 'Home', href: '#', icon: HouseIcon },
    { label: 'Entertainment', href: '#', icon: BookIcon },
    { label: 'Recreation', href: '#', icon: BikeIcon },
    { label: 'Relaxation', href: '#', icon: TreePalmIcon },
  ];

  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 = $state(true);

  function toggleLayout() {
    layoutRail = !layoutRail;
  }
</script>

<div class="w-full h-[728px] grid grid-cols-[auto_1fr] items-stretch border border-surface-200-800">
  <!-- --- -->
  <Navigation layout={layoutRail ? 'rail' : 'sidebar'} class={layoutRail ? '' : 'grid grid-rows-[1fr_auto] gap-4'}>
    <Navigation.Content>
      <Navigation.Menu>
        {#each links as link (link)}
          {@const Icon = link.icon}
          <a href={link.href} class={layoutRail ? anchorRail : anchorSidebar}>
            <Icon class={layoutRail ? 'size-5' : 'size-4'} />
            <span class={layoutRail ? 'text-[10px]' : ''}>{link.label}</span>
          </a>
        {/each}
      </Navigation.Menu>
    </Navigation.Content>
    <Navigation.Footer>
      <button type="button" class={layoutRail ? anchorRail : anchorSidebar} onclick={toggleLayout}>
        <ArrowLeftRightIcon class={layoutRail ? 'size-5' : 'size-4'} />
        {#if !layoutRail}<span>Resize</span>{/if}
      </button>
    </Navigation.Footer>
  </Navigation>
  <!-- --- -->
  <div class="flex justify-center items-center">
    <pre class="pre">Layout: {layoutRail ? 'Rail' : 'Sidebar'}</pre>
  </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`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Header

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"header">]> \| undefined Render the element yourself

Content

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

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Group

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

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Label

text-xs text-surface-700-300

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Footer

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"footer">]> \| undefined Render the element yourself