NavigationLinks

This component is useful for lists of links. RFUI uses it for the "Components" section on the left side of this page and for the "On this page" section on the right side of this page.
Source code
import { NavigationLinks } from "rfui";

#Basic

<NavigationLinks
  linkItems={[{
    name: "One",
    href: "/one",
  }, {
    name: "Two",
    href: "/two",
  }]}
/>

#With header

<NavigationLinks
  linkItems={[{
    name: "Header",
    isHeader: true,
  }, {
    name: "One",
    href: "/one",
  }, {
    name: "Two",
    href: "/two",
  }]}
/>

#Multilevel

To go more levels deep, just keep using children.
<NavigationLinks
  linkItems={[{
    name: "Components",
    isHeader: true,
  }, {
    name: "Atoms",
    children: [{
      name: "Badge",
      href: "/atoms/badge",
    }, {
      name: "Blockquote",
      href: "/atoms/blockquote",
    }],
  }, {
    name: "Molecules",
    children: [{
      name: "Alert",
      href: "/molecules/alert",
    }, {
      name: "Card",
      href: "/molecules/card",
    }],
  }]}
/>

#In page

Using the inPage property will trigger the Link component's in-page link functionality.
<NavigationLinks
  linkItems={[{
    name: "One",
    href: "#one",
    inPage: true,
  }, {
    name: "Two",
    href: "#two",
    inPage: true,
  }]}
/>

#Sticky

Often times you'll want this component to be sticky, such that it stays in place when you scroll down. To accomplish this you'll want to add something like:
class="sticky top-6 max-h-[90vh] overflow-y-auto"
Note: the example below isn't actually sticky.
<NavigationLinks
  class="sticky top-6 max-h-[90vh] overflow-y-auto"
  linkItems={[{
    name: "One",
    href: "/one",
  }, {
    name: "Two",
    href: "/two",
  }]}
/>

#Props

PropRequiredDefaultType and notes
linkItems✔-
LinkItemType[]
The type for LinkItemType is below. Note that it is defined recursively.
type LinkItemType = {
  name: string;
  href?: string;
  isHeader?: boolean;
  inPage?: boolean;
  children?: LinkItemType[];
}
...rest--
ComponentProps<"nav">
See the docs for rest parameters. For NavigationLinks, you could pass anything you normally would pass to <nav> because the return value looks something like this:
<nav class={containerClass} {...restWithoutClass}>
  ...
</nav>