SideNav

Side navigation: links grouped under titles, with the current page marked by a bar.

Import

Copy code

import { SideNav } from '@k8ordo/ui';

Usage

The library has no router, so you say which link is current with current. It gets aria-current="page" and the bar.

tsx

Copy code

<SideNav.Root label="Guide">
  <SideNav.Group title="Getting started">
    <SideNav.Link current href="/get-started">
      Get started
    </SideNav.Link>
    <SideNav.Link href="/theming">Theming</SideNav.Link>
  </SideNav.Group>
  <SideNav.Group title="Components">
    <SideNav.Link href="/button">Button</SideNav.Link>
  </SideNav.Group>
</SideNav.Root>

Using Your Router’s Link

renderAnchor replaces the element itself. Its bag holds href, className, children, aria-current, and every attribute you passed (an onClick that closes a drawer, say). This site’s side navigation is built with it.

tsx

Copy code

<SideNav.Link
  current={matchPath(item.path, pathname) !== null}
  href={href(item.path)}
  onClick={closeDrawer}
  renderAnchor={({ children, ...props }) => (
    <Link {...props}>{children}</Link>
  )}
>
  {item.name}
</SideNav.Link>

Props

SideNav.Root

label: Type: string; Default: -
children?: Type: ReactNode; Default: -

Prop	Type	Default
`label`	`string`	-
`children?`	`ReactNode`	-

Type base (some attrs are managed internally): HTMLAttributes<HTMLElement>

SideNav.Group

title: Type: string; Default: -
children?: Type: ReactNode; Default: -

Prop	Type	Default
`title`	`string`	-
`children?`	`ReactNode`	-

SideNav.Link

children: Type: ReactNode; Default: -
href: Type: T; Default: -
current?: Type: boolean; Default: false
renderAnchor?: Type: (props: RenderSideNavAnchorProps<T>) => ReactNode; Default: defaultRenderAnchor

Prop	Type	Default
`children`	`ReactNode`	-
`href`	`T`	-
`current?`	`boolean`	`false`
`renderAnchor?`	`(props: RenderSideNavAnchorProps<T>) => ReactNode`	`defaultRenderAnchor`

Type base (some attrs are managed internally): AnchorHTMLAttributes<HTMLAnchorElement>