SutraUI.NavPills (Sutra UI v0.2.0)

View Source

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

This component provides a flexible navigation pattern that adapts to screen size:

  • Desktop: Shows all navigation items as pill-style buttons in a horizontal row
  • Mobile: Converts to a compact dropdown menu showing the active item

Features

  • Responsive design (pills on desktop, dropdown on mobile)
  • Active state management
  • ARIA labels for accessibility
  • Flexible item slots
  • Support for icons in navigation items

Examples

# Basic navigation pills
<.nav_pills id="content-nav" active_label="Overview">
  <:item label="Overview" patch={~p"/content"} />
  <:item label="Students" patch={~p"/content/students"} />
  <:item label="Settings" patch={~p"/content/settings"} />
</.nav_pills>

# Custom styling
<.nav_pills id="org-nav" active_label="About" class="mb-6">
  <:item label="About" patch={~p"/orgs/456"} />
  <:item label="Members" patch={~p"/orgs/456/members"} />
</.nav_pills>

Accessibility

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

Summary

Functions

nav_pills(assigns)

Renders responsive navigation pills.

Functions