BwBreadcrumbs | bw-breadcrumbs

Overview

Breadcrumbs are used to navigate through a website. Each individual item within container should use the bw-breadcrumb component.

Usage

Example

Item 1Item 2Item 3Item 4Item 5

<div style="padding-bottom: 8px;">
    <bw-breadcrumbs>
        <bw-breadcrumb>Item 1</bw-breadcrumb>
        <bw-breadcrumb>Item 2</bw-breadcrumb>
        <bw-breadcrumb>Item 3</bw-breadcrumb>
        <bw-breadcrumb>Item 4</bw-breadcrumb>
        <bw-breadcrumb>Item 5</bw-breadcrumb>
    </bw-breadcrumbs>
</div>

Items After Collapse

To use items after collapse, max items must be set as well. Max items must be less than the total number of bw-breadcrumb elements. If bw-breadcrumb elements is less than max items, all crumbs will be shown.

Item 1Item 2Item 3Item 4Item 5

<div style="padding-bottom: 8px;">
    <bw-breadcrumbs itemsAfterCollapse="2" maxItems="4">
        <bw-breadcrumb>Item 1</bw-breadcrumb>
        <bw-breadcrumb>Item 2</bw-breadcrumb>
        <bw-breadcrumb>Item 3</bw-breadcrumb>
        <bw-breadcrumb>Item 4</bw-breadcrumb>
        <bw-breadcrumb>Item 5</bw-breadcrumb>
    </bw-breadcrumbs>
</div>

Items Before Collapse

To use items before collapse, max items must be set as well. Max items must be less than the total number of bw-breadcrumb elements. If bw-breadcrumb elements is less than max items, all crumbs will be shown.

Item 1Item 2Item 3Item 4Item 5

<div style="padding-bottom: 8px;">
    <bw-breadcrumbs itemsBeforeCollapse="2" maxItems="4">
        <bw-breadcrumb>Item 1</bw-breadcrumb>
        <bw-breadcrumb>Item 2</bw-breadcrumb>
        <bw-breadcrumb>Item 3</bw-breadcrumb>
        <bw-breadcrumb>Item 4</bw-breadcrumb>
        <bw-breadcrumb>Item 5</bw-breadcrumb>
    </bw-breadcrumbs>
</div>

Properties

Property	Attribute	Description	Type	Default
itemsAfterCollapse	items-after-collapse	The number of items to show after the collapse button	number	1
itemsBeforeCollapse	items-before-collapse	The number of items to show before the collapse button	number	1
maxItems	max-items	The maximum number of items to show	number	undefined

---

© 2025 United Systems & Software - All Rights Reserved.