Nav

<ts-nav> vv0.4.0

The ts-nav component.

Open in Storybook for interactive demos.

Preview

<ts-nav variant="sidebar">Content</ts-nav>

Properties

Property	Attribute	Type	Default	Description
collapsed	collapsed	boolean	false	Whether the sidebar nav is collapsed (icons only).
variant	variant	"horizontal" | "sidebar"	'sidebar'	The navigation layout variant.

Slots

Name	Description
*(default)*	Default slot for ts-nav-item children.

CSS Parts

Use ::part() to style internal elements:

Part	Description
list	The list container.
nav	The native nav element.

ts-nav::part(list) {
  /* your custom styles */
}

Usage

HTML

<ts-nav variant="sidebar">Content</ts-nav>

React

import { TsNav } from '@tessera-ui/react';

<TsNav variant="sidebar">Content</TsNav>