Navigation

Components for navigating between views and organizing content.

Prerequisites

Before using these components, complete the @mdk/core installation and add the dependency.

Collapsible navigation panel with expand/collapse and overlay modes.

Import

import {
  Sidebar,
  useSidebarExpandedState,
  useSidebarSectionState,
  clearSidebarState,
} from '@mdk/core'

Props

Prop	Type	Default	Description
`items`	`SidebarMenuItem[]`	none	Required. Menu items array
`activeId`	`string`	none	Currently active item ID
`expanded`	`boolean`	none	Controlled expanded state
`defaultExpanded`	`boolean`	`false`	Initial expanded state
`visible`	`boolean`	`true`	Sidebar visibility
`overlay`	`boolean`	`false`	Overlay mode (mobile)
`header`	`ReactNode`	none	Header content
`onItemClick`	`function`	none	Item click callback
`onExpandedChange`	`function`	none	Expand state callback
`onClose`	`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 '@mdk/core'

Props

Prop	Type	Default	Description
`defaultValue`	`string`	none	Initially active tab
`value`	`string`	none	Controlled active tab
`onValueChange`	`function`	none	Tab change callback
`variant`	`'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 '@mdk/core'

Usage

<TabsContent value="heavy-content">
  <LazyTabWrapper>
    <ExpensiveComponent />
  </LazyTabWrapper>
</TabsContent>

`Breadcrumbs`

Navigation path showing page hierarchy.

Import

import { Breadcrumbs, BreadcrumbItem } from '@mdk/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

Navigation

Navigation

Prerequisites

`Sidebar`

Import

Props

`SidebarMenuItem` type

Basic usage

With persisted state

Styling

`Tabs`

Import

Props

Basic usage

Side variant

Styling

`LazyTabWrapper`

Import

Usage

Import

Basic usage

Styling

On this page