Breadcrumbs
Build Bootstrap breadcrumbs in Wappler, including separators and the active page state for accessible navigation.
Breadcrumbs
Section titled “Breadcrumbs”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. This step matters because Breadcrumb example is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Current breadcrumb item is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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”). This step matters because Breadcrumb link item is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Breadcrumb link: Text and Link is part of Selection Panels Properties Breadcrumblinktext, and understanding that context makes the next action easier to repeat in your own project.
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.