BreadcrumbNav

Breadcrumb navigation that shows the current page’s position within the site hierarchy. It displays the path from the home page to the current page and allows customizable separators. Ideal for multi‑level sites.

Use Cases

• Multi‑level sites with page hierarchies (e.g., Home > Products > Electronics > Laptops)
• E‑commerce product pages showing category path
• Documentation sites with nested sections
• Admin panels with deep navigation structures
• Content sites with category/subcategory organization
• Any site where users need context of where they are

Properties

breadcrumbMode

Use ‘manual’ to provide breadcrumb items directly. ‘auto’ generates from page hierarchy (limited — only shows Home). Type: string. Options: auto, manual. Default: manual

manualBreadcrumbs

Breadcrumb path items from home to current page (used when breadcrumbMode is ‘manual’). Type: array. Recommended:

• first-item: Always start with ‘Home’ pointing to home page
• last-item: Omit href/targetPage on last item to make it non‑clickable (current page)
• label-length: Keep labels short (1‑2 words, 15 chars max)
• item-count: 4‑5 visible crumbs ideal; use maxCrumbsVisible for long paths

breadcrumbSeparator

Symbol separating breadcrumb items. Type: string. Options: chevron, slash, dot. Default: chevron

maxCrumbsVisible

Maximum breadcrumbs to show before collapsing middle items (0 = show all). Type: number. Default: 5

variant

Visual style variant. Type: string. Options: light, dark, glass. Default: light

showUtilities

Whether to show utility items on the right side of the breadcrumb bar. Type: boolean. Default: true

utilityItems

Utility items displayed on the right side (e.g., action buttons, links). Type: array.

showSearch

Show an embedded search bar in the breadcrumb navigation. Type: boolean. Default: false

searchPlaceholder

Placeholder text for the search bar (when showSearch is true). Type: string.

showAuthButton

Show login/logout button. Required for apps with authentication. Type: boolean. Default: false

loginButtonText

Text for the login button. Type: string. Default: Sign In

showCartIcon

Show shopping cart icon with badge count. Type: boolean. Default: false

cartTargetPage

Target page slug for cart icon click. Type: string.

stickyTop

Keep breadcrumb bar fixed at top during scroll. Type: boolean. Default: false

customCss

Custom CSS for styling. Type: string.

Best Practices

• Place breadcrumbs at top of page content, below main navbar
• Always start with ‘Home’ as first crumb
• Keep crumb labels short (1‑2 words)
• Current page should be last crumb (no href/targetPage makes it non‑clickable)
• Limit visible crumbs to 4‑5; collapse middle items if more
• Make all crumbs except current page clickable via targetPage
• Use for sites with 3+ levels of hierarchy