Breadcrumb

Indicate the current page’s location within a navigational hierarchy.

Dark (default) version

import Link from 'next/link'
import Breadcrumb from 'react-bootstrap/Breadcrumb'

{/* Basic example. Make sure to add linnkAs={Link} attribute to <Breadcrumb.Item> so the links work as expected without page reload. */}
<Breadcrumb>
  <Breadcrumb.Item linkAs={Link} href='#'>Home</Breadcrumb.Item>
  <Breadcrumb.Item linkAs={Link} href='#'>Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

{/* Home icon */}
<Breadcrumb>
  <Breadcrumb.Item linkAs={Link} href='#'>
    <i className='fi-home'></i>
  </Breadcrumb.Item>
  <Breadcrumb.Item linkAs={Link} href='#'>Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

Light version

import Link from 'next/link'
import Breadcrumb from 'react-bootstrap/Breadcrumb'

{/* Light version. Make sure to add linnkAs={Link} attribute to <Breadcrumb.Item> so the links work as expected without page reload. */}
<Breadcrumb className='breadcrumb-light'>
  <Breadcrumb.Item linkAs={Link} href='#'>Home</Breadcrumb.Item>
  <Breadcrumb.Item linkAs={Link} href='#'>Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

{/* Home icon */}
<Breadcrumb className='breadcrumb-light'>
  <Breadcrumb.Item linkAs={Link} href='#'>
    <i className='fi-home'></i>
  </Breadcrumb.Item>
  <Breadcrumb.Item linkAs={Link} href='#'>Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

Content

Components

Utilities

Breadcrumb