NavItem

NavItem is one of crisp's Product-layer building blocks — Sidebar renders every row in its main nav, record list, and chats sections with it. It's meant to be used on its own too, wherever an app needs a nav-row link.

Measured from Attio's left rail — 28px height, r9 radius, 14px weight-500 label, 4-5% tint hover/active fill.

Preview

Installation

bun add crisp

import "crisp/styles.css";
import { NavItem } from "crisp";

Usage

import { NavItem } from "crisp";

export function Example() {
  return <NavItem href="/home">Home</NavItem>;
}

Props

Examples

Default

<NavItem href="/notes">Notes</NavItem>

Active

active applies the same tint Sidebar uses to mark the current section — a hair darker than hover.

<NavItem href="/tasks" active>
  Tasks
</NavItem>

With a leading icon

icon accepts any 16px node — commonly a Lucide icon.

import { House } from "lucide-react";

<NavItem href="/home" icon={<House size={16} strokeWidth={1.75} aria-hidden />}>
  Home
</NavItem>

With a trailing count

trailing is pushed to the row's end — Sidebar uses this slot for the active Tasks item's count Badge.

<NavItem href="/tasks" active icon={<SquareCheck size={16} />} trailing={<Badge tone="brand" variant="solid" size="small">1</Badge>}>
  Tasks
</NavItem>

Accessibility

NavItem renders an <a> by default, so it's a real link — focusable, reachable by Tab, and activated with Enter — with no extra ARIA needed. Use active to reflect the current route visually; if the row also represents the current page in a navigation landmark, pair it with aria-current="page" on the same element. When icon is decorative (redundant with the visible label, as in every example above), mark it aria-hidden so it isn't announced twice.