Nav Pills

A responsive navigation pills component that displays pills on desktop and converts to a dropdown on mobile.

Default

    <.nav_pills id="content-nav" active_label="Overview">
  <:item label="Overview" patch={~p"/content"} />
  <:item label="Analytics" patch={~p"/content/analytics"} />
  <:item label="Settings" patch={~p"/content/settings"} />
</.nav_pills>
  

Responsive Behavior

Nav Pills automatically adapts to screen size:

Desktop: Shows all items as horizontal pill buttons
Mobile: Converts to a dropdown menu showing the active item

Usage

Nav Pills requires an id, the active_label of the current item, and :item slots with label and patch attributes.

    Usage
  

    <.nav_pills id="content-nav" active_label={@active_tab}>
  <:item label="Overview" patch={~p"/content"} />
  <:item label="Analytics" patch={~p"/content/analytics"} />
  <:item label="Settings" patch={~p"/content/settings"} />
</.nav_pills>
  

With Icons

Use the inner block of each item slot to add icons before the label.

With Icons

    <.nav_pills id="nav" active_label="Dashboard">
  <:item label="Dashboard" patch={~p"/dashboard"}>
    <.icon name="lucide-layout-grid" class="size-4 mr-2" />
  </:item>
  <:item label="Projects" patch={~p"/projects"}>
    <.icon name="lucide-folder" class="size-4 mr-2" />
  </:item>
  <:item label="Team" patch={~p"/team"}>
    <.icon name="lucide-users" class="size-4 mr-2" />
  </:item>
</.nav_pills>
  

Accessibility

The nav pills component includes proper ARIA attributes:

Desktop pills use role="navigation" with aria-label
Mobile dropdown uses proper ARIA popup attributes
Active item is clearly indicated visually and semantically