Components

Navlist

Structured vertical menus for site navigation.

 
<.navlist>
  <.navlink navigate="/customers">Customers</.navlink>
  <.navlink navigate="/subscriptions">Subscriptions</.navlink>
  <.navlink navigate="/products">Products</.navlink>
  <.navlink navigate="/coupons">Coupons</.navlink>
</.navlist>

Heading

Add section headers to organize navigation groups.

 
<!-- Via heading attribute -->
<.navlist heading="Customers">
  <.navlink href="#">Customers</.navlink>
  <.navlink href="#">Subscriptions</.navlink>
</.navlist>

<!-- Via .navheading component -->
<.navlist>
  <.navheading>Products</.navheading>
  <.navlink href="#">Products</.navlink>
  <.navlink href="#">Coupons</.navlink>
</.navlist>

Icons

Enhance navigation items with descriptive icons.

 
<.navlist>
  <.navlink href="#">
    <.icon name="hero-users" class="size-5" /> Customers
  </.navlink>
  <.navlink href="#">
    <.icon name="hero-shopping-bag" class="size-5" /> Subscriptions
  </.navlink>
  <.navlink href="#">
    <.icon name="hero-cube" class="size-5" /> Products
  </.navlink>
  <.navlink href="#">
    <.icon name="hero-tag" class="size-5" /> Coupons
  </.navlink>
</.navlist>

Icon Only

Display compact navigation using icons without text.

 
<.navlist>
  <.tooltip value="Customers" placement="right">
    <.navlink href="#">
      <.icon name="hero-users" class="size-5" />
    </.navlink>
  </.tooltip>
  <.tooltip value="Subscriptions" placement="right">
    <.navlink href="#">
      <.icon name="hero-shopping-bag" class="size-5" />
    </.navlink>
  </.tooltip>
  <.tooltip value="Products" placement="right">
    <.navlink href="#">
      <.icon name="hero-cube" class="size-5" />
    </.navlink>
  </.tooltip>
  <.tooltip value="Coupons" placement="right">
    <.navlink href="#">
      <.icon name="hero-tag" class="size-5" />
    </.navlink>
  </.tooltip>
</.navlist>

Badges

Include badges to highlight updates or status indicators.

 
<.navlist>
  <.navlink href="#">
    <span class="grow">Customers</span>
    <.badge>255</.badge>
  </.navlink>
  <.navlink href="#">
    <span class="grow">Subscriptions</span>
    <.badge color="green">231</.badge>
  </.navlink>
  <.navlink href="#">Products</.navlink>
  <.navlink href="#">Coupons</.navlink>
</.navlist>

Customization

Style the navigation list to match your design system.

 
<.navlist>
  <.navheading class="text-xs uppercase font-medium text-zinc-400 dark:text-zinc-500">Customers</.navheading>
  <.navlink
    href="#"
    class="hover:after:absolute hover:after:inset-y-0 hover:after:left-0 hover:after:my-1.5 hover:after:bg-blue-600 hover:after:w-1 hover:after:rounded-r-md relative group hover:ring-1 ring-zinc-200 dark:ring-zinc-800 py-2 hover:shadow-sm hover:bg-white dark:hover:bg-zinc-800 hover:text-blue-600"
  >
    <.icon name="hero-users" class="size-5" /> Customers
  </.navlink>
  <!-- more links -->
</.navlist>

<.separator class="my-4" />

<.navlist>
  <.navlink href="#" class="py-2">
    <div class="border bg-white border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 rounded-lg p-1 flex items-center justify-center shadow-xs dark:shadow-zinc-800/50">
      <.icon name="hero-credit-card" class="size-4" />
    </div>
    Payments
  </.navlink>
  <!-- more links -->
</.navlist>