Skip to content
StrataKit Docs

unstable_NavigationList API

Component status:
unstable

Import

Section titled “Import”
import { unstable_NavigationList as NavigationList } from "@stratakit/structures";
// OR
import * as NavigationList from "@stratakit/structures/unstable_NavigationList";
Section titled “NavigationList.Root”
Base element: <div>

A navigation list displays a collection of navigation links, one of which can be “active”.

Basic example:

<NavigationList.Root
  items={[
    <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
    <NavigationList.Anchor key={2} href="/page2" label="Item 2" active />,
  ]}
/>

Example with subgroups:

<NavigationList.Root
  items={[
    <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
    <NavigationList.Anchor key={2} href="/page2" label="Item 2" />,
    <NavigationList.Subgroup
      key={3}
      label="Subgroup"
      items={[
        <NavigationList.Anchor key={1} href="/page3-1" label="Item 3.1" />,
        <NavigationList.Anchor key={2} href="/page3-2" label="Item 3.2" />,
      ]}
    />,
  ]}
/>
Section titled “items”
Type: Element[] (required)

The navigation items to render within the list. Should be an array of NavigationList.Anchor elements.

Section titled “Additional props”
Section titled “NavigationList.Anchor”
Base element: <a>

An individual anchor within the navigation list. This should perform a navigation to a different view, page or section. (Make sure to use proper routing/navigation)

Should be used as an element within the items array of NavigationList.Root.

Example:

<NavigationList.Anchor href="/profile"> label="Profile" />
Section titled “label”
Type: string (required)

The label of the navigation anchor.

Section titled “active”
Type: boolean | undefined (optional)

Whether the anchor is active.

This will automatically set aria-current="true" on the anchor.

Section titled “icon”
Type: string | Element | undefined (optional)

The icon shown before the label of the navigation anchor.

Can be a URL of an SVG from the @stratakit/icons package, or a custom JSX icon.

Section titled “Additional props”
Section titled “NavigationList.Subgroup”
Base element: <div>

A subgroup within the navigation list, used to group related navigation items.

Should be used as an element within the items array of NavigationList.Root.

Example:

<NavigationList.Subgroup label="Management" items={[ … ]} />
Section titled “items”
Type: Element[] (required)

The navigation items within the subgroup. Should be an array of NavigationList.Anchor elements.

Section titled “label”
Type: string (required)

The label for the subgroup.

Section titled “defaultOpen”
Type: boolean | undefined (optional)

Whether the subgroup is expanded by default.

Section titled “icon”
Type: string | Element | undefined (optional)

The icon shown before the label of the subgroup.

Can be a URL of an SVG from the @stratakit/icons package, or a custom JSX icon.

Section titled “Additional props”