Navigation
Sidebar, tabs, and breadcrumb navigation components
Components for navigating between views and organizing content.
Prerequisites
Sidebar
Collapsible navigation panel with expand/collapse and overlay modes.
Import
import {
Sidebar,
useSidebarExpandedState,
useSidebarSectionState,
clearSidebarState,
} from '@tetherto/mdk-react-devkit/core'Props
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
items | Required | SidebarMenuItem[] | none | Required. Menu items array |
activeId | Required | string | none | Currently active item ID |
expanded | Required | boolean | none | Controlled expanded state |
defaultExpanded | Optional | boolean | false | Initial expanded state |
visible | Optional | boolean | true | Sidebar visibility |
overlay | Optional | boolean | false | Overlay mode (mobile) |
header | Optional | ReactNode | none | Header content |
onItemClick | Required | function | none | Item click callback |
onExpandedChange | Required | function | none | Expand state callback |
onClose | Required | function | none | Close callback (overlay mode) |
SidebarMenuItem type
type SidebarMenuItem = {
id: string
label: string
icon?: ReactNode
href?: string
children?: SidebarMenuItem[]
disabled?: boolean
}Basic usage
const items = [
{ id: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
{ id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
{
id: 'reports',
label: 'Reports',
icon: <ReportsIcon />,
children: [
{ id: 'daily', label: 'Daily' },
{ id: 'weekly', label: 'Weekly' },
],
},
]
<Sidebar
items={items}
activeId="dashboard"
onItemClick={(item) => navigate(item.href)}
/>With persisted state
function App() {
const [expanded, setExpanded] = useSidebarExpandedState(true)
return (
<Sidebar
items={items}
expanded={expanded}
onExpandedChange={setExpanded}
/>
)
}Styling
.mdk-sidebar: Root container.mdk-sidebar--expanded: Expanded state.mdk-sidebar--hidden: Hidden state.mdk-sidebar--overlay: Overlay mode.mdk-sidebar__toggle: Expand/collapse button.mdk-sidebar__menu: Menu container.mdk-sidebar__backdrop: Overlay backdrop
Tabs
Tab navigation for organizing content into panels.
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tetherto/mdk-react-devkit/core'Props
| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
defaultValue | Optional | string | none | Initially active tab |
value | Optional | string | none | Controlled active tab |
onValueChange | Optional | function | none | Tab change callback |
variant | Optional | 'default' | 'side' | 'default' | Tab layout variant |
Basic usage
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
<TabsTrigger value="logs" disabled>Logs</TabsTrigger>
</TabsList>
<TabsContent value="overview">
Overview content here
</TabsContent>
<TabsContent value="settings">
Settings content here
</TabsContent>
</Tabs>Side variant
<Tabs defaultValue="tab1" variant="side">
<TabsList variant="side">
<TabsTrigger value="tab1" variant="side">Tab 1</TabsTrigger>
<TabsTrigger value="tab2" variant="side">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</Tabs>Styling
.mdk_tabs: Root container.mdk_tabs__list: Tab button container.mdk_tabs__list--side: Side variant list.mdk_tabs__trigger: Individual tab button.mdk_tabs__content: Tab panel content
LazyTabWrapper
Wrapper for tab content that defers rendering until the tab is first viewed.
Import
import { LazyTabWrapper } from '@tetherto/mdk-react-devkit/core'Usage
<TabsContent value="heavy-content">
<LazyTabWrapper>
<ExpensiveComponent />
</LazyTabWrapper>
</TabsContent>Breadcrumbs
Navigation path showing page hierarchy.
Import
import { Breadcrumbs, BreadcrumbItem } from '@tetherto/mdk-react-devkit/core'Basic usage
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/miners">Miners</BreadcrumbItem>
<BreadcrumbItem>Details</BreadcrumbItem>
</Breadcrumbs>Styling
.mdk-breadcrumbs: Root container.mdk-breadcrumbs__item: Individual item.mdk-breadcrumbs__separator: Separator between items