Geist UI

Breadcrumbs

Show where users are in the application.

General

Code Editor

<Breadcrumbs>
  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

<Breadcrumbs>
  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

Separator

Custom separator in characters.

Code Editor

<>
  <Breadcrumbs separator="-">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
    <Breadcrumbs.Item>Page</Breadcrumbs.Item>
  </Breadcrumbs>
  <Spacer h={.5} />
  <Breadcrumbs separator=">">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Separator>:</Breadcrumbs.Separator>
    <Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
    <Breadcrumbs.Item>Button</Breadcrumbs.Item>
  </Breadcrumbs>
</>

<>
  <Breadcrumbs separator="-">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
    <Breadcrumbs.Item>Page</Breadcrumbs.Item>
  </Breadcrumbs>
  <Spacer h={.5} />
  <Breadcrumbs separator=">">
    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
    <Breadcrumbs.Separator>:</Breadcrumbs.Separator>
    <Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
    <Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
    <Breadcrumbs.Item>Button</Breadcrumbs.Item>
  </Breadcrumbs>
</>

Icons

Show more information with icons.

Code Editor

<Breadcrumbs>
  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>
  <Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

<Breadcrumbs>
  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>
  <Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

With NextJS

Example for use with next.js.

Code Editor

<Breadcrumbs>
  <NextLink href="/">
    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
  </NextLink>
  <NextLink href="/en-us/components">
    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
  </NextLink>
  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>

<Breadcrumbs>
  <NextLink href="/">
    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
  </NextLink>
  <NextLink href="/en-us/components">
    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
  </NextLink>
  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>

APIs

`Breadcrumbs.Props`

Attribute	Description	Type	Accepted values	Default
separator	separator string	`string`	-	`/`
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

`Breadcrumbs.Item.Props`

Attribute	Description	Type	Accepted values	Default
href	link address	`string`	-	-
nextLink	in `next.js` route	`boolean`	-	`false`
onClick	click event	`(event: MouseEvent) => void`	-	-
...	native props	`AnchorHTMLAttributes`	`'id', 'className', ...`	-

`Breadcrumbs.Separator.Props`

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Contributors

Geist is an open source project from the community.