Nav
Nav is an app's vertical navigation, moving people between its main areas.
Made of NavItem (icon + label), collapsible NavCategory (NavCategoryItem + NavSubItemGroup + NavSubItem), NavSectionHeader and NavDivider. The selected item has a brand tint background, brand-foreground-2 text and a 4px indicator bar on its leading edge. A closed category that contains the selected item shows the indicator too.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Nav, NavItem, NavCategory, NavCategoryItem, NavSubItemGroup, NavSubItem, NavSectionHeader, NavDivider,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Category, section header & divider
Controlled with selectedValue / onNavItemSelect; defaultOpenCategories opens groups initially.
Density small
density="small": 32px items for tight spaces.
Usage
Do
- Keep labels short: nouns that name the area (“Reports”, “Settings”).
- Use NavCategory for at most 1 level of children.
- Place Nav on the shell-nav background and use brand only for the selected item.
Don't
- Don't fill the whole navigation bar with brand color.
- Don't nest categories more than one level deep.
- Don't put actions (Save, Delete) in Nav. It is only for navigation.
Props
| Prop · Type | Default | Description |
|---|---|---|
| selectedValue / defaultSelectedValuestring | Default: — | Selected item. |
| onNavItemSelect(value: string, data: { categoryValue? }) => void | Default: — | Called when a NavItem / NavSubItem is selected. |
| openCategories / defaultOpenCategoriesstring[] | Default: [] | Open NavCategory values. |
| onNavCategoryItemToggle(value: string, open: boolean) => void | Default: — | Called when a category opens or closes. |
| multipleboolean | Default: true | Allows several categories to be open at once. |
| density"medium" | "small" | Default: "medium" | Item height 40 / 32px. |
| material"glass" | "glass-clear" | Default: — | Yugen Labs — a floating glass sidebar (rounded corners, padding, shadow). |
| NavItem | Default: — | With href it renders an <a>; asChild for router links; tooltip is the label shown when an AppShell sidebar is collapsed to icons (defaults to the item text). |
| NavCategory | Default: — | Group key (used in openCategories). |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.nav
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| labelstring aria-label mặc định của thẻ <nav>. | Default (English)"Main navigation" | messagesVi"Điều hướng chính" |