Navigation

Breadcrumb

Ordered list of links inside a nav with aria-current on the leaf.

Element: <nav>
Module: @basenative/components
Function: renderBreadcrumb

Quick start

Import the render function and call it from your server template.

import { renderBreadcrumb } from '@basenative/components';

renderBreadcrumb({ items: [{ label: 'Home', href: '/' }, { label: 'Page' }] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Hierarchical path

Ordered list of links inside a nav element. Final crumb has aria-current="page".

Live render

Source

renderBreadcrumb({
  items: [
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Breadcrumb' },
  ],
})

Options

Arguments accepted by renderBreadcrumb().

renderBreadcrumb option reference
Option	Type	Default	Description
`items`	`{ label, href }[]`	`—`	Path segments. Last entry omits href.