Contents Menu Expand Light mode Dark mode Auto light/dark mode
sphinx-basic-ng
sphinx-basic-ng
  • Goals
  • Expectations

Usage

  • Getting Started
  • Skeleton
  • Components
    • Breadcrumbs
    • “Edit this page” link
    • Ethical Ads
    • Site Logo
    • Related Pages
    • “Hide search matches” link
    • Search input
    • Sidebar Drawer Toggles
    • “View this page” link
  • Glossary

Project

  • Development
  • Design
  • Changelog
  • License
  • GitHub
Back to top

Breadcrumbs#

A breadcrumb navigation provide links back to each “parent” page of the current page, showing the user’s current location in a website and giving them a good way to navigate within it.

Usage#

{% include "components/breadcrumbs.html" %}

When there are no list-items to show in the breadcrumb, this component will render empty.

In all other cases, the structure looks like:

  • a single nav.breadcrumb-nav

    • a single ol.breadcrumb-nav-list

      • one-or-more breadcrumb-nav-list-item containing a single a[href] tag.

      • a single breadcrumb-nav-list-item contain a single span tag.

Tip

See this page for an example of how to stylise breadcrumbs with this structure.

Configurability#

There are 2 values that can be provided via the html-context, which provide control over the components shown in the breadcrumbs:

  • breadcrumb_include_index_as: If provided, this name is used as the first list-item of the breadcrumb on pages other than the index page.The corresponding list-item will have an additional class: breadcrumb-nav-index-item.

  • breadcrumb_include_page: If truthy, the current page is included in the breadcrumb as the final list-item, with only a span (there’s no a[href] in it). The corresponding list-item will have an additional class: breadcrumb-nav-page-item.

Next
“Edit this page” link
Previous
Components
Copyright © 2023, Pradyun Gedam
Made with Sphinx and @pradyunsg's Furo
On this page
  • Breadcrumbs
    • Usage
    • Configurability