Breadcrumb
Used to display a page's location within a site's hierarchical structure
'use client'
import { Breadcrumb } from '@saas-ui/react'
export const BreadcrumbBasic = () => {
return (
<Breadcrumb.Root>
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
)
}
Anatomy
import { Breadcrumb } from '@saas-ui/react/breadcrumb'<Breadcrumb.Root separator="/">
<Breadcrumb.Link href="#">Workspace</Breadcrumb.Link>
<Breadcrumb.Ellipsis />
<Breadcrumb.CurrentLink>Projects</Breadcrumb.CurrentLink>
</Breadcrumb.Root>Examples
Sizes
Use the size prop to change the size of the breadcrumb component
'use client'
import { Stack } from '@chakra-ui/react'
import { Breadcrumb } from '@saas-ui/react'
export const BreadcrumbWithSizes = () => {
return (
<Stack>
<Breadcrumb.Root size="sm">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
<Breadcrumb.Root size="md">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
<Breadcrumb.Root size="lg">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
</Stack>
)
}
Variants
Use the variant prop to change the appearance of the breadcrumb component
'use client'
import { Stack } from '@chakra-ui/react'
import { Breadcrumb } from '@saas-ui/react'
export const BreadcrumbWithVariants = () => {
return (
<Stack>
<Breadcrumb.Root variant="plain">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
<Breadcrumb.Root variant="underline">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
</Stack>
)
}
With Separator
Use the separator prop to add the separator
'use client'
import { Breadcrumb } from '@saas-ui/react'
import { LiaSlashSolid } from 'react-icons/lia'
export const BreadcrumbWithSeparator = () => {
return (
<Breadcrumb.Root separator={<LiaSlashSolid />}>
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
)
}
Icon
Here's how you can add an icon to the breadcrumb
'use client'
import { Breadcrumb } from '@saas-ui/react'
import { LuHouse, LuShirt } from 'react-icons/lu'
export const BreadcrumbWithIcon = () => {
return (
<Breadcrumb.Root>
<Breadcrumb.Link href="#">
<LuHouse /> Home
</Breadcrumb.Link>
<Breadcrumb.Link href="#">
<LuShirt /> Men Wear
</Breadcrumb.Link>
<Breadcrumb.CurrentLink>Trousers</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
)
}
Menu
Compose the breadcrumb with menu component
'use client'
import { Breadcrumb, Menu } from '@saas-ui/react'
import { LuChevronDown } from 'react-icons/lu'
export const BreadcrumbWithMenu = () => {
return (
<Breadcrumb.Root separator="/" separatorGap="4">
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Menu.Root>
<Menu.Trigger asChild>
<Breadcrumb.Link as="button">
Components <LuChevronDown />
</Breadcrumb.Link>
</Menu.Trigger>
<Menu.Content>
<Menu.Item value="theme">Theme</Menu.Item>
<Menu.Item value="props">Props</Menu.Item>
<Menu.Item value="custom">Customization</Menu.Item>
</Menu.Content>
</Menu.Root>
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
)
}
Ellipsis
Render the BreadcrumbEllipsis component to show an ellipsis
'use client'
import { Breadcrumb } from '@saas-ui/react'
export const BreadcrumbWithEllipsis = () => {
return (
<Breadcrumb.Root>
<Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
<Breadcrumb.Link href="#">Components</Breadcrumb.Link>
<Breadcrumb.Ellipsis />
<Breadcrumb.CurrentLink>Props</Breadcrumb.CurrentLink>
</Breadcrumb.Root>
)
}
Routing Library
Use the asChild prop to change the underlying breadcrumb link
// import { Link } from "next/link"
<BreadcrumbRoot>
<BreadcrumbLink asChild>
<Link href="/docs">Docs</Link>
</BreadcrumbLink>
</BreadcrumbRoot>Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
variant | 'plain' | 'underline' | 'plain'The variant of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
separator | React.ReactNode | |
separatorGap | SystemStyleObject['gap'] | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |