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.

28px height, r9 radius, 14px weight-500 label, 4-5% tint hover/active fill. Unlike most product/ surfaces it carries no app-specific content of its own — it's a generic nav-row primitive that happens to live in the Product layer because Sidebar composes it.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { NavItem } from "@crisp-ui-kit/crisp";

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

Props

Examples

Default

Active

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

With a leading icon

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

With a trailing count

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

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.