Breadcrumbs
Build Bootstrap breadcrumbs in Wappler, including separators and the active page state for accessible navigation.
Breadcrumbs show the current page’s location within a navigational hierarchy. They should reflect structure (not history).
Breadcrumb example
Section titled “Breadcrumb example”Breadcrumbs show hierarchy and help users understand where they are in a site structure.
Tip: Keep the last item current
Section titled “Tip: Keep the last item current”In Bootstrap docs, the current page is typically the last breadcrumb item and should not be a link.
Items and links
Section titled “Items and links”Use breadcrumb items for the hierarchy levels, and links for the navigable levels.
Current breadcrumb item
Section titled “Current breadcrumb item”The last breadcrumb item typically represents the current page.
Breadcrumb item: Active
Section titled “Breadcrumb item: Active”Use Active for the current page. This matches the Bootstrap pattern of marking the current level.
Breadcrumb link item
Section titled “Breadcrumb link item”Breadcrumb links represent navigable hierarchy levels (for example, “Home”).
Breadcrumb link: Text and Link
Section titled “Breadcrumb link: Text and Link”Use Text to change the label and Link to pick a route or file. Keep breadcrumb labels short and descriptive.
Tip: Internal navigation
Section titled “Tip: Internal navigation”If you’re using Wappler partial loads, enable Internal so the route loads inside the current view.
Next steps
Section titled “Next steps”Continue with other Components tours or return to the Components menu.