Toggle Sidebar B
AppearanceLight & dark mode D
Pill Nav
Minimal pill nav with sliding active highlight + smooth easing.
Default
Hover a pill to see the circle rise from its bottom edge. Pick a theme and toggle the initial load animation underneath.
API Reference
PillNav
| Prop | Type | Default | Description |
|---|---|---|---|
logo | string | - | URL for the logo image. |
logoAlt | string | 'Logo' | Alt text for the logo image. |
items | PillNavItem[] | - | Array of navigation items with label, href, and optional ariaLabel. Internal hrefs render as NuxtLink with the href as the `to` prop. |
activeHref | string | undefined | The href of the currently active navigation item. Compared with the item href as written. |
ease | string | 'power3.easeOut' | GSAP easing function for animations. |
baseColor | string | '#fff' | Base background color for the navigation. |
pillColor | string | '#120F17' | Background color for navigation pills. |
hoveredPillTextColor | string | '#120F17' | Text color when hovering over pills. |
pillTextColor | string | baseColor | Text color for navigation pills. |
initialLoadAnimation | boolean | true | Enable initial load animation for logo scale and nav items reveal. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
mobile-menu-click | () => void | - | Emitted when the mobile menu button is clicked. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus through the logo and the links. |
| Enter | Follows the focused link, or toggles the menu on the mobile button. |
- The hover label is aria-hidden and every link keeps an aria-label. On viewports up to 768px wide the pills collapse into a menu button.