Navigation Components
Sidebars, tabs, breadcrumbs, and navigation menus
Components for application navigation.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
AppHeader
Generic top-bar shell with three slots: start, children (middle), and actions (end). Renders a sticky dark surface; consumers compose any content into the slots. The sidebar collapse toggle, br…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
logo | React.ReactNode | - | Left-most slot — typically the app's brand lockup / logo. | |
start | React.ReactNode | - | Left-edge content — e.g. a sidebar collapse toggle button. | |
children | React.ReactNode | - | Middle slot — typically the dashboard's stats strip. | |
actions | React.ReactNode | - | Right-edge action cluster — e.g. alarms bell, profile menu. | |
className | string | undefined | - | Optional class hook for the outer <header> element. | |
sticky | boolean | undefined | - | Render the header sticky to the top of its scroll container. Defaults to true. |
Breadcrumbs
Hierarchical navigation trail that renders the path of pages leading to the current view. Each item can be a link (href or onClick) or plain text; the last item is rendered as the current page. P…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
items | BreadcrumbItem[] | ✓ | - | - |
showBack | boolean | undefined | - | - | |
backLabel | string | undefined | - | - | |
className | string | undefined | - | - | |
itemClassName | string | undefined | - | - | |
backClassName | string | undefined | - | - | |
onBackClick | VoidFunction | undefined | - | - | |
separator | React.ReactNode | - | - |
Pagination
Pagination component for navigating through pages
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
current | number | undefined | - | Current active page number | |
total | number | undefined | - | Total number of items | |
pageSize | number | undefined | 20 | Number of items per page | |
pageSizeOptions | number[] | undefined | [10, 20, 50, 100] | Page size options for the select dropdown | |
showSizeChanger | boolean | undefined | true | Show page size changer | |
showTotal | boolean | undefined | false | Show total count text | |
disabled | boolean | undefined | false | Disable pagination | |
size | ComponentSize | undefined | 'sm' | Size variant | |
className | string | undefined | - | Custom className for the root element | |
onChange | ((page: number, pageSize: number) => void) | undefined | - | Callback when page number or page size changes | |
onSizeChange | ((current: number, size: number) => void) | undefined | - | Callback when page size changes |
Sidebar
Application sidebar with collapsible state, persistent expansion (via localStorage), optional overlay mode, and item-click + active-item highlighting.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
activeId | string | undefined | ✓ | - | - |
expanded | boolean | undefined | ✓ | - | - |
visible | boolean | undefined | ✓ | - | - |
overlay | boolean | undefined | ✓ | - | - |
className | string | undefined | ✓ | - | - |
defaultExpanded | boolean | undefined | ✓ | - | - |
header | React.ReactNode | ✓ | - | - |
onClose | VoidFunction | undefined | ✓ | - | - |
onExpandedChange | ((expanded: boolean) => void) | undefined | ✓ | - | - |
onItemClick | ((item: SidebarMenuItem) => void) | undefined | ✓ | - | - |
items | SidebarMenuItem[] | ✓ | - | - |