Skip to content
tcpsystemsui

Theme

Colour scheme
Accent
Density
Radius
Esc

SideNav

Rail navigation, two levels at most.

beta

Examples

Basic

Basic.svelte
<script lang="ts">
	import SideNav from '@tcpsystems/ui/foundation/SideNav';
</script>

<SideNav label="Sections" items={[
	{ label: 'Overview', href: '#overview', current: true },
	{ label: 'Deployments', href: '#deployments' },
	{ label: 'Invoices', href: '#invoices' },
	{ label: 'Team', href: '#team' },
	{ label: 'Settings', href: '#settings' }
]} />

Nested

Nested.svelte
<script lang="ts">
	import SideNav from '@tcpsystems/ui/foundation/SideNav';
</script>

<SideNav label="Library" items={[
	{ label: 'Projects', items: [
		{ label: 'Acumen', href: '#acumen', current: true },
		{ label: 'Search gateway', href: '#search-gateway' },
		{ label: 'Status', href: '#status' }
	] },
	{ label: 'Operations', items: [
		{ label: 'Fleet', href: '#fleet' },
		{ label: 'Edge', href: '#edge' }
	] },
	{ label: 'Archive', open: false, items: [
		{ label: 'mail-pilot', href: '#mail-pilot' }
	] }
]} />

States

States.svelte
<script lang="ts">
	import SideNav from '@tcpsystems/ui/foundation/SideNav';
</script>

<SideNav label="Console" items={[
	{ label: 'Alerts', href: '#alerts', badge: '3' },
	{ label: 'Deployments', href: '#deployments' },
	{ label: 'Billing', disabled: true },
	{ label: 'Services', open: false, items: [
		{ label: 'Search gateway', href: '#search-gateway', current: true },
		{ label: 'Chat', href: '#chat' }
	] }
]} />

API

Import
import SideNav from '@tcpsystems/ui/foundation/SideNav';
PropTypeDefault
itemsNavItem[]none
label?string'Primary'
HookKind
.tcp-sidenavRoot class