SideNav

見出しごとにまとめたリンクで、今のページを傍線で示すサイドナビ

インポート

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

使い方

ui はルーターを持たないので、どのリンクが今のページかは current で渡す。aria-current="page" が付き、傍線で示される。

tsx
<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>

ルーターのリンクに差し替える

renderAnchor は要素そのものを差し替える。束には href・className・children・aria-current と、渡した属性（ドロワーを閉じる onClick など）がすべて入っている。このサイトのサイドナビもこれで組んでいる。

tsx
<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: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLElement>

SideNav.Group

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

SideNav.Link

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

型ベース（内部で固定する一部attrsは除外）: AnchorHTMLAttributes<HTMLAnchorElement>

Components