Navigation Components

Components for application navigation.

Prerequisites

Complete the installation
Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Breadcrumbs

import { Breadcrumbs } from '@tetherto/mdk-react-devkit'

Horizontal breadcrumb navigation. Renders an ordered trail of links / buttons / plain labels with an optional "Back" button on the left.

Notes

The last item is rendered as the current page (aria-current="page").
Items without href or onClick render as plain text.

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, brand logo, stats strip, and action buttons are all caller-provided — this component owns no domain.

agent-ready

Props

Prop	Type	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. Pass showBack to prepend a "back" affordance for mobile/touch layouts. The separator between items is customisable via separator (defaults to a chevron).

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	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

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[]`	✓	-	-

Navigation Components

Prerequisites

Components

Notes

Example

`AppHeader`

Props

Props

Props

`Sidebar`

Props

On this page