SideNav
Rail navigation, two levels at most.
beta
Examples
Basic
<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
<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
<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 SideNav from '@tcpsystems/ui/foundation/SideNav';| Prop | Type | Default |
|---|---|---|
items | NavItem[] | none |
label? | string | 'Primary' |
| Hook | Kind |
|---|---|
.tcp-sidenav | Root class |