Navigation

Components for application navigation.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

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

Components

@tetherto/mdk-react-devkit

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

Example

/**
 * Runnable example for Breadcrumbs.
 */
import { Breadcrumbs } from '@tetherto/mdk-react-devkit'

export const BreadcrumbsExample = () => (
  <Breadcrumbs
    showBack
    onBackClick={() => undefined}
    items={[
      { label: 'Dashboard', href: '/' },
      { label: 'Devices', onClick: () => undefined },
      { label: 'Miner #42' },
    ]}
  />
)

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/app-header/app-header.tsx

Props

Prop	Status	Type / Options	Default	Description
`actions`	Optional	`React.ReactNode`	-	Right-edge action cluster — e.g. alarms bell, profile menu, or sign-out
`children`	Optional	`React.ReactNode`	-	Middle slot — e.g. the dashboard stats strip or page title
`className`	Optional	`string`	-	Optional class hook for the outer `<header>` element
`logo`	Optional	`React.ReactNode`	-	Left-most slot — typically the app's brand lockup / logo
`start`	Optional	`React.ReactNode`	-	Left-edge content — e.g. a sidebar collapse toggle or brand wordmark
`sticky`	Optional	`boolean`	`true`	Render the header sticky to the top of its scroll container

`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 /)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/breadcrumbs/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`items`	Required	`BreadcrumbItem[]`	-	Ordered trail; the last item is rendered as current
`backClassName`	Optional	`string`	-	Class names applied to the back button
`backLabel`	Optional	`string`	`"Back"`	`Label` for the back button
`className`	Optional	`string`	-	Root class names
`itemClassName`	Optional	`string`	-	Class names applied to each item
`onBackClick`	Optional	`VoidFunction`	-	Callback fired when the back button is clicked
`separator`	Optional	`React.ReactNode`	`"/"`	Custom separator between items
`showBack`	Optional	`boolean`	`false`	Show a leading "Back" button

`Pagination`

Pagination component for navigating through pages

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/pagination/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Custom className for the root element
`current`	Optional	`number`	`1`	Current active page number
`disabled`	Optional	`boolean`	`false`	Disable pagination
`onChange`	Optional	`((page: number, pageSize: number) => void)`	-	Callback when page number or page size changes
`onSizeChange`	Optional	`((current: number, size: number) => void)`	-	Callback when page size changes
`pageSize`	Optional	`number`	`20`	Number of items per page
`pageSizeOptions`	Optional	`number[]`	`[10, 20, 50, 100]`	Page size options for the select dropdown
`showSizeChanger`	Optional	`boolean`	`true`	Show page size changer
`showTotal`	Optional	`boolean`	`false`	Show total count text
`size`	Optional	`"sm" \| "md" \| "lg"`	`"sm"`	Size variant
`total`	Optional	`number`	`0`	Total number of items

Application sidebar with collapsible state, persistent expansion (via localStorage), optional overlay mode, and item-click + active-item highlighting

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/sidebar/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`items`	Required	`SidebarMenuItem[]`	-	Menu items (supports nested `items`)
`activeId`	Optional	`string`	-	Currently active item id
`className`	Optional	`string`	-	Additional class names
`defaultExpanded`	Optional	`boolean`	`false`	Initial expanded state
`expanded`	Optional	`boolean`	-	Controlled expanded state
`header`	Optional	`React.ReactNode`	-	Header content (e.g. logo, app name)
`onClose`	Optional	`VoidFunction`	-	Called when the backdrop or ESC closes
`onExpandedChange`	Optional	`((expanded: boolean) => void)`	-	Setter for the expanded state
`onItemClick`	Optional	`((item: SidebarMenuItem) => void)`	-	Item-click handler
`overlay`	Optional	`boolean`	`false`	Show as fixed overlay with backdrop
`visible`	Optional	`boolean`	`true`	Hide entirely without unmounting

Navigation

Prerequisites

Components

Notes

`AppHeader`

Props

Props

Props

`Sidebar`

Props

On this page

Navigation

Show steps

On this page