Breadcrumb

The Breadcrumb component provides you with navigation breadcrumbs for your application.

Import

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@nostromo/ui-core'
// or
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@nostromo/ui-core/breadcrumb'

Usage

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Current Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@nostromo/ui-core' export default function BreadcrumbExample() { return ( <Breadcrumb> <BreadcrumbList> <BreadcrumbItem> <BreadcrumbLink href="/">Home</BreadcrumbLink> </BreadcrumbItem> <BreadcrumbSeparator />...

Props

All Breadcrumb components extend standard HTML attributes and accept:

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Component content

Component-Specific Props

Breadcrumb: Extends React.HTMLAttributes<HTMLElement>
BreadcrumbList: Extends React.HTMLAttributes<HTMLOListElement> (renders as <ol>)
BreadcrumbItem: Extends React.HTMLAttributes<HTMLLIElement> (renders as <li>)
BreadcrumbLink: Extends React.AnchorHTMLAttributes<HTMLAnchorElement> (renders as <a>) - accepts href, target, etc.
BreadcrumbPage: Extends React.HTMLAttributes<HTMLSpanElement> (renders as <span>)
BreadcrumbSeparator: Extends React.HTMLAttributes<HTMLLIElement> (renders as <li>)

All components accept standard HTML attributes for their respective elements (e.g., id, data-*, aria-*).

Tabs Pagination