Skip to content
DOL Studio

NavItem

Design: extension Code: Code only navlink

Live preview

Tab variant

Variant 1 · horizontal underline tabs. Page-level navigation (Overview / Details / History). Active state = brand-tinted text + 2px brand underline.

Pill variant

Variant 2 · vertical sidebar list. Icon + label + optional trailing count chip. Active state = brand-50 fill + brand-700 text.

Grid variant

Variant 3 · card-style 2-column app-launcher. Icon-top, label-bottom. Active state = brand-50 fill + brand-200 border + brand-700 text.

Dropdown variant

Variant 4 · context-menu items inside popover shell. Last item supports `danger` tone for destructive actions (Logout / Delete).

Polymorphism

Renders as Link (navigation, `<a href>`) or button (action, `<button onClick>`). Visual identical; semantics matter for screen-reader + browser-history behavior.
As Link · href → page nav<a>
<button>

Import & files

Import
import { NavItem } from "@/components/ui/NavItem";
Source file
components/ui/NavItem.tsx

Spec

Spec Props · Axes · Usage

Props

Prop Type Default Description
variant 'tab' | 'pill' | 'grid' | 'dropdown' 'tab' —
isActive boolean false —
icon ReactNode - —
as 'link' | 'button' 'button' —
to string - —

Variants · Tones · Sizes

Variants
tabpillgriddropdown

Usage

Pick variant by context: tab (top nav), pill (filter rows), grid (dashboard tiles), dropdown (menu item).

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 2
  • Tab variant (3 items, first active)
  • Pill variant (filter row)

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# NavItem
Domain: general · Category: navigation
Design: extension · Code: code-only


## Description
Polymorphic nav item with 4 variants (tab, pill, grid, dropdown). Renders as Link or button.


## Import
```ts
import { NavItem } from "@/components/ui/NavItem";
```
Source: `components/ui/NavItem.tsx`


## Props (5)
| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'tab' | 'pill' | 'grid' | 'dropdown'` | 'tab' |  |
| `isActive` | `boolean` | false |  |
| `icon` | `ReactNode` | - |  |
| `as` | `'link' | 'button'` | 'button' |  |
| `to` | `string` | - |  |


## Axes
Variants: `tab`, `pill`, `grid`, `dropdown`


## Usage
Pick variant by context: tab (top nav), pill (filter rows), grid (dashboard tiles), dropdown (menu item).


## Examples
- **Tab variant (3 items, first active)**
- **Pill variant (filter row)**

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
  • S
    nav

    Sidebar

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded

  • Pagination

    Coded
  • HomeSectionCurrent

    Breadcrumb

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).