Introduction
Components
Easy hierarchical navigation
Breadcrumb navigation assists users in recognizing their position within a website hierarchy, by offering a trail of breadcrumbs leading back to the homepage.
<Breadcrumb.Root> <Breadcrumb.Link to="/" label="Home" /> <Breadcrumb.Link to="/hello" label="Hello" /> <Breadcrumb.Link to="/hello/world" label="World" /> </Breadcrumb.Root>
const links = [ { to: '/', label: 'Home' }, { to: '/hello', label: 'Hello' }, { to: '/world', label: 'World' } ] as const; <Breadcrumb.Root> {Breadcrumb.Link.fromList(links)} </Breadcrumb.Root>
<Breadcrumb> <Breadcrumb.Link to="/" label="Home" /> <Breadcrumb.Link to="/hello" label="Hello" /> <Breadcrumb.Link to="/hello/world" label="World" /> </Breadcrumb>
<Breadcrumb separator={ControlsChevronRightIcon}> {Breadcrumb.Link.fromList(links)} </Breadcrumb> <Breadcrumb separator={ArrowsChevronRightDoubleIcon}> {Breadcrumb.Link.fromList(links)} </Breadcrumb>