SidebarItem

Show a Sidebar navigation item with active state, icon, hierarchy, and status hints.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use SidebarItem as a navigation entry with stable identity, icon, text, and target address. Active state does not perform business routing automatically.

Provide a stable id and label. href is the navigation address; onSelect reports the selection.
disabled prevents navigation. actions configures entry actions, and parts configures built-in Badge and action Buttons.
The built-in updated dot name follows LocaleProvider. The caller owns label, tags and actions. Existing decorative and accessibility-tree behavior in collapsed mode is unchanged.

Import

import { SidebarItem } from '@snowui-design-system/components';

Usage

Nested navigation

Tags and updates

Disabled

Actions

API Reference

Property	Type	Default	Example	Description
`id`	`string`	`required`	`id="example"`	Stable navigation identity.
`label`	`string`	`required`	`label="Example"`	Visible text and accessible name in the collapsed state.
`icon`	`string \| Snippet`	`—`	`icon={iconContent}`	ResourceIcon name or custom leading content.
`iconCollection`	`string`	`—`	`iconCollection="Example"`	ResourceIcon collection for icon. Pass "snowui" when a SnowUI icon shares its name with another collection.
`depth`	`0 \| 1`	`0`	`depth={value}`	Navigation depth. 1 denotes a second-level item; the component draws an L-shaped hierarchy connector in the leading slot instead of the ordinary Icon.
`href`	`string`	`—`	`href="/components"`	When present, the primary action renders Link; otherwise it renders Button.
`updated`	`boolean`	`false`	`updated`	Built-in Badge dot. In expanded mode it follows external tags; in collapsed mode it follows the leading icon.
`tags`	`Snippet`	`—`	`tags={tagsContent}`	Custom state or category tags after label and before updated. Badge variant="border" is recommended.
`disabled`	`boolean`	`false`	`disabled`	Disable the primary action.
`actions`	`SidebarActionData[] \| Snippet`	`[]`	`actions={actionsContent}`	Zero or more trailing actions. An array generates bare Buttons.
`onSelect`	`(id: string) => void`	`—`	`onSelect={(value) => { /* handle value */ }}`	Callback when this item is selected.
`parts`	`ComponentPartsOf<{ Badge: typeof Badge; Button: typeof Button }>`	`—`	`parts={partsOptions}`	Configure generated Badge and data-generated Buttons.