VerticalNavbar

A vertical navbar is a good option for more complex sites that have a lot of navigation items they want to display. See Nielsen Norman Group's blog post for more information.

Note: If you're using this component you'll probably want to structure your layout in a manner similar to this:

<section class="sm:flex">
  <VerticalNavbar route={route} />
  <Container class="grow pb-8">
    <Component />
  </Container>
</section>

Note: This component doesn't work well with Footer. You probably won't want to combine the two though.

Source code
import { 
  VerticalNavbar, 
  VerticalNavbarTop, 
  VerticalNavbarBottom, 
  VerticalNavbarSection, 
  VerticalNavbarItem
} from "rfui";

#Basic

<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarItem href="/one" isActive={false}>
      One
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/two" isActive={false}>
      Two
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/three" isActive={false}>
      Three
    </VerticalNavbarItem>
  </VerticalNavbarTop>
</VerticalNavbar>

#Active link

Set isActive to true if the link is for the URL that the user is currently on. Doing so will give some more visual weight to the element and disable the link. In practice you'll probably end up having something like this:

isActive={route === "/one"}
<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarItem href="/one" isActive={true}>
      One
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/two" isActive={false}>
      Two
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/three" isActive={false}>
      Three
    </VerticalNavbarItem>
  </VerticalNavbarTop>
</VerticalNavbar>

#Sections

There is a hasMarginUnderneath property that comes in handy if you need to use a VerticalNavbarSection inside of a VerticalNavbarBottom component.
<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarSection>
      <VerticalNavbarItem href="/one" isActive={false}>
        One
      </VerticalNavbarItem>
      <VerticalNavbarItem href="/two" isActive={false}>
        Two
      </VerticalNavbarItem>
    </VerticalNavbarSection>
    <VerticalNavbarSection>
      <VerticalNavbarItem href="/three" isActive={false}>
        Three
      </VerticalNavbarItem>
      <VerticalNavbarItem href="/four" isActive={false}>
        Four
      </VerticalNavbarItem>
    </VerticalNavbarSection>
  </VerticalNavbarTop>
</VerticalNavbar>

#Heading

<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarSection heading="Heading">
      <VerticalNavbarItem href="/one" isActive={false}>
        One
      </VerticalNavbarItem>
      <VerticalNavbarItem href="/two" isActive={false}>
        Two
      </VerticalNavbarItem>
      <VerticalNavbarItem href="/three" isActive={false}>
        Three
      </VerticalNavbarItem>
    </VerticalNavbarSection>
  </VerticalNavbarTop>
</VerticalNavbar>

#Top and bottom

<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarItem href="/one" isActive={false}>
      One
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/two" isActive={false}>
      Two
    </VerticalNavbarItem>
  </VerticalNavbarTop>
  <VerticalNavbarBottom>
    <VerticalNavbarItem href="/three" isActive={false}>
      Three
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/four" isActive={false}>
      Four
    </VerticalNavbarItem>
  </VerticalNavbarBottom>
</VerticalNavbar>

#Icons

Note: heroicons is a great resource.

Note: since some icons have more whitespace than others, you might need to use relative positioning to nudge it up or down. Some thing like:

icon={<IconOne class="relative top-1" />}
<VerticalNavbar>
  <VerticalNavbarTop>
    <VerticalNavbarItem href="/one" isActive={false} icon={<IconOne />}>
      One
    </VerticalNavbarItem>
    <VerticalNavbarItem href="/two" isActive={false} icon={<IconTwo />}>
      Two
    </VerticalNavbarItem>
    <VerticalNavbarItem
      href="/three"
      isActive={false}
      icon={<IconThree />}
    >
      Three
    </VerticalNavbarItem>
  </VerticalNavbarTop>
</VerticalNavbar>

#Props

PropRequiredDefaultType and notes
background-"neutral"
"neutral" | "none"
children✔-
ComponentChild
...rest--
Omit<ComponentProps<"nav">, "size">
See the docs for rest parameters. For VerticalNavbar, you could pass anything you normally would pass to <nav> because the return value looks something like this:
<nav class={containerClass} {...restWithoutClass}>
  ...
</nav>

VerticalNavbarTop

PropRequiredDefaultType and notes
children✔-
ComponentChild

VerticalNavbarBottom

PropRequiredDefaultType and notes
children✔-
ComponentChild

VerticalNavbarSection

PropRequiredDefaultType and notes
heading--
string
hasMarginUnderneath-false
boolean
This property is useful if you need to put a VerticalNavbarSection inside of a VerticalNavbarBottom component.
children✔-
ComponentChild

VerticalNavbarItem

PropRequiredDefaultType and notes
href✔-
string
isActive✔-
boolean
Set this to be true if this link matches the current URL.
shouldOpenInNewTab-false
boolean
See the docs for the corresponding property in the Link component.
shouldIncludeNewTabIcon-false
boolean
See the docs for the corresponding property in the Link component.
icon--
ComponentChild
A 20x20 icon to be placed to the left of the text.
children✔-
ComponentChild