SideNav

Collapsible app navigation with a docked icon rail, a floating panel, nested links, custom content and a pinned footer.

View Code

<script>
  import { AppWindow, AppSurface, SideNav, SideNavItem } from 'fluentui-svelte';
  import { HomeRegular, FolderRegular, SettingsRegular } from 'fluentui-icons-svelte';
</script>

<AppWindow width={480} height={240}>
  <SideNav header="Workspace">
    <SideNavItem href="#home" label="Home" icon={HomeRegular} active />
    <SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
    <SideNavItem href="#settings" label="Settings" icon={SettingsRegular} />
  </SideNav>
  <AppSurface style="padding: 1rem">Page content</AppSurface>
</AppWindow>

Usage

Place SideNav and AppSurface directly inside AppWindow, after an optional TitleBar. Items are links by default; use as="button" for actions and set active from your router. SideNav also works on its own, in any container with a height.

<script>
	import { AppWindow, AppSurface, SideNav, SideNavItem } from 'fluentui-svelte';
	import { HomeRegular, FolderRegular, SettingsRegular } from 'fluentui-icons-svelte';
</script>

<AppWindow width={480} height={240}>
	<SideNav header="Workspace">
		<SideNavItem href="#home" label="Home" icon={HomeRegular} active />
		<SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
		<SideNavItem href="#settings" label="Settings" icon={SettingsRegular} />
	</SideNav>
	<AppSurface style="padding: 1rem">Page content</AppSurface>
</AppWindow>

Collapsed rail

Bind collapsed to expand and collapse the navigation. Docked, a collapsed SideNav keeps a rail with the icon of every item; an item without an icon shows its initial.

View Code

<script>
  let collapsed = $state(true);
</script>

<SideNav bind:collapsed header="Workspace">
  <SideNavItem href="#home" label="Home" icon={HomeRegular} />
  <SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
</SideNav>

Floating navigation

With floating, the navigation overlays its positioned parent instead of taking up space, and only the hamburger remains while it is closed. Escape, a click outside, moving the focus away or activating an item closes it; set closeOnSelect to false to keep it open after activating an item.

View Code

<div style="position: relative">
  <SideNav floating collapsed header="Workspace">
    <SideNavItem href="#home" label="Home" icon={HomeRegular} />
    <SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
  </SideNav>
  <p style="padding-inline-start: 3rem">Page content</p>
</div>

Page content

Position

position places the navigation on the left, the default, or on the right of the window. AppSurface follows it: it rounds the corners that face the navigation. It also applies to a floating navigation, which opens from that edge, and it mirrors in right-to-left layouts.

View Code

<AppWindow width={480} height={200}>
  <SideNav position="right" header="Workspace">
    <SideNavItem href="#home" label="Home" icon={HomeRegular} />
    <SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
  </SideNav>
  <AppSurface style="padding: 1rem">Page content</AppSurface>
</AppWindow>

With a title bar

The global navigation button of TitleBarLeftControls controls the SideNav of the same AppWindow, and takes the place of its hamburger. Set showToggle on the SideNav to show both.

View Code

<AppWindow width={480} height={200}>
  <TitleBar>
    {#snippet leftControls()}
      <TitleBarLeftControls globalNav appName="Workspace" />
    {/snippet}
    {#snippet rightControls()}
      <TitleBarRightControls />
    {/snippet}
  </TitleBar>
  <SideNav>
    <SideNavItem href="#home" label="Home" icon={HomeRegular} />
    <SideNavItem href="#documents" label="Documents" icon={FolderRegular} />
  </SideNav>
  <AppSurface style="padding: 1rem">Page content</AppSurface>
</AppWindow>

Nested navigation and footer

SideNavBranch nests items under a disclosure, and the footer snippet pins items to the bottom. Opening a branch from the rail expands the navigation first. listViewProps customizes every list of the navigation, and selectedItems can be bound when selection is enabled.

View Code

<SideNav header="Workspace">
  <SideNavBranch label="Projects" icon={FolderRegular}>
    <SideNavItem href="#one" label="Project one" />
    <SideNavItem href="#two" label="Project two" />
  </SideNavBranch>
  {#snippet footer()}
    <SideNavItem href="#settings" label="Settings" icon={SettingsRegular} />
  {/snippet}
</SideNav>

Custom content and menus

topContent goes between the hamburger and the list, and footerContent after it. Each takes text, a snippet or a component; renderers receive collapsed and floating, and plain text is hidden in the rail.

View Code

<script>
  let collapsed = $state(false);
</script>

<SideNav bind:collapsed header="Workspace">
  {#snippet topContent()}
    {#if !collapsed}
      <TextBox type="search" placeholder="Search" aria-label="Search" />
    {/if}
  {/snippet}
  <SideNavItem href="#home" label="Home" icon={HomeRegular} />
</SideNav>

Component Props (SideNav)

Name	Type	Default	Description
`ref` bindable	`HTMLElement` \| `null`		The DOM reference of the navigation landmark.
`label`	`string`	`'Main navigation'`	The accessible name of the navigation landmark.
`collapsed` bindable	`boolean`	`false`	Shows an icon rail when docked, or only the toggle when floating.
`position`	`'left'` \| `'right'`	`'left'`	The side of the window the navigation is on. It mirrors in right-to-left layouts, and AppSurface rounds the corners that face it.
`showToggle`	`boolean`	`Automatic`	Whether the navigation shows its own hamburger toggle. By default it hides it when the title bar of its window has a global navigation button, which then controls the navigation. Set it to true to keep both, or to false to control the navigation yourself.
`floating`	`boolean`	`false`	Overlays the content of a positioned parent instead of taking layout space. The overlay is non-modal.
`width`	`number` \| `string`	`200`	The expanded width. Numbers are pixels converted to rem; strings are CSS lengths.
`expandLabel`	`string`	`'Expand navigation'`	The accessible label of the toggle while collapsed.
`collapseLabel`	`string`	`'Collapse navigation'`	The accessible label of the toggle while expanded.
`closeOnSelect`	`boolean`	`true`	Closes a floating panel after activating a SideNavItem.
`onCollapsedChange`	`(event: Event, collapsed: boolean) => void`		Called when the user expands or collapses the navigation.
`selectedItems` bindable	`string[]`		The selection shared by every list in the navigation. Selection is off by default.
`listViewProps`	`SideNavListViewProps`		Overrides the defaults of every list in the navigation, the main one, the footer and the ones inside a SideNavBranch: native list semantics, no selection and one tab stop per item.
`header`	`string`		The text heading beside the hamburger button. Hidden in the compact rail.
`topContent`	`string` \| `Snippet` \| `Component`		Custom content between the hamburger section and the list. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
`footerContent`	`string` \| `Snippet` \| `Component`		Custom content after the scrolling list and before the pinned footer. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
`footer`	`Snippet`		Footer list items pinned to the bottom, outside the main list's scroll area.
`children`	`Snippet`		Main navigation items. Use SideNavItem and SideNavBranch.
`HTMLAttributes<HTMLElement>` without `children`

Component Props (SideNavItem)

Name	Type	Default	Description
`as`	`'li'` \| `'a'` \| `'button'` \| `'div'`	`'a'`	The HTML tag. Links are the default; use button for actions and li or div for custom controls.
`ref` bindable	`HTMLLIElement` \| `HTMLAnchorElement` \| `HTMLButtonElement` \| `HTMLDivElement`		The DOM reference of the item.
`label`	`string`		The accessible label, also used as visible content when children are absent.
`icon`	`Snippet` \| `Component`		The decorative icon shown in both expanded and collapsed modes.
`children`	`Snippet`		Optional item markup, following ListViewItem. The label is rendered when children are absent.
`shape`, `value`, `active`, `role`, `disabled`, `checkmark`, `onAction`, `onfocus` from `ListViewItemProps`
HTML Attributes

Component Props (SideNavBranch)

Name	Type	Default	Description
`label`	`string`		The accessible label of the disclosure button. In the compact rail, its initial stands in when there is no icon.
`icon`	`Snippet` \| `Component`		The decorative icon before the label.
`expanded` bindable	`boolean`	`false`	Whether the nested items are visible. Branches only expand or collapse and are never selectable. The compact rail reports a branch as collapsed, and opens the navigation when one is pressed.
`onExpandedChange`	`(e: Event, expanded: boolean) => void`		Called when a user expands or collapses the branch.
`disabled`	`boolean`	`false`	Disables the disclosure button.
`ref` bindable	`HTMLButtonElement`		The DOM reference of the native disclosure button. Additional HTML attributes, including class and id, also target this button.
`wrapperRef` bindable	`HTMLLIElement` \| `HTMLDivElement`		The DOM reference of the wrapper element, the list item that holds the button and the nested list.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`shape`	`ListViewItemBranchProps['shape']`		The disclosure button shape. Inherited from the list by default.
`children`	`Snippet`		The nested SideNavItem and SideNavBranch content.
`HTMLButtonAttributes` without `children`, `role`, `type`, `value`, `aria-expanded`, `aria-controls`

Components

SideNav

Usage

Collapsed rail

Floating navigation

Position

With a title bar

Nested navigation and footer

Custom content and menus

Component Props (SideNav)

Component Props (SideNavItem)

Component Props (SideNavBranch)