Noarka UI

Installation

npx @noarka/cli add breadcrumb

Usage

tsx

import {  Breadcrumb,  BreadcrumbEllipsis,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@noarka/ui";

tsx

<Breadcrumb>  <BreadcrumbList>    <BreadcrumbItem>      <BreadcrumbLink href="#">Docs</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbLink href="#">Components</BreadcrumbLink>    </BreadcrumbItem>    <BreadcrumbSeparator />    <BreadcrumbItem>      <BreadcrumbPage>Button</BreadcrumbPage>    </BreadcrumbItem>  </BreadcrumbList></Breadcrumb>

Examples

With ellipsis

Collapse middle levels behind an ellipsis.

Custom separator

Pass any glyph as the separator child.

API reference

Prop	Type	Default
`children` Usually a single BreadcrumbList.	`ReactNode`	`-`
`className` Additional classes merged on the nav element.	`string`	`-`

BreadcrumbList

Prop	Type	Default
`children` BreadcrumbItem and BreadcrumbSeparator elements.	`ReactNode`	`-`
`className` Additional classes merged with the default list styles.	`string`	`-`

BreadcrumbItem

Prop	Type	Default
`children` One link, page, or collapsed control.	`ReactNode`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

BreadcrumbLink

Prop	Type	Default
`href` Link target. Renders a native anchor.	`string`	`-`
`className` Additional classes merged with the default link styles.	`string`	`-`

BreadcrumbPage

Prop	Type	Default
`children` Current page label. Announced via aria-current.	`ReactNode`	`-`
`className` Additional classes merged with the default page styles.	`string`	`-`

BreadcrumbSeparator

Prop	Type	Default
`children` Custom glyph. Defaults to a right arrow icon.	`ReactNode`	`-`
`className` Additional classes merged with the default separator styles.	`string`	`-`

BreadcrumbEllipsis

Prop	Type	Default
`className` Additional classes merged with the default ellipsis styles.	`string`	`-`