Nav

<ts-nav> vv0.6.3

The ts-nav component.

Open in Storybook for interactive demos.

Preview

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

Properties

Property	Attribute	Type	Default	Description
collapsed	collapsed	boolean	false	Whether the sidebar nav is collapsed (icons only).
label	label	string	'Navigation'	Accessible label for the nav element.
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 label="Navigation" variant="sidebar">Content</ts-nav>

React

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

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