v7.0.9
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
sun_max_fillmoon_fill
SponsorsBecome a sponsor
Improve this Doc

Breadcrumbs

Breadcrumbs allow users to keep track and maintain awareness of their locations within the app or website. They should be used for large sites and apps with hierarchically arranged pages.

Common Breadcrumbs layout is the following:

<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item">
    <a href="/catalog/" class="link">
      Catalog
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>

Where

  • breadcrumbs - main breadcrumbs container
    • breadcrumbs-item - single breadcrumb item. Can contain any content
    • breadcrumbs-item-active - current/active navigation item
    • breadcrumbs-separator - separator icon between items

Collapsed Breadcrumbs Layout

When there are a lot of breadcrumb items, it is possible to add custom "collapsed" button, for example with Popover inside:

<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <!-- Collapsed button, also triggers Popover -->
  <div class="breadcrumbs-collapsed link popover-open" data-popover=".my-popover">
    <span></span>
    <!-- Popover inside of collapsed button -->
    <div class="popover my-popover">
      <div class="popover-inner">
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link item-content popover-close">
                <div class="item-inner">
                  <div class="item-title">Catalog</div>
                </div>
              </a>
            </li>
            ...
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>

Example

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Breadcrumbs</div>
    </div>
  </div>

  <div class="page-content">
    <div class="block-title">Basic</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Catalog
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          Phones
        </div>
      </div>
    </div>

    <div class="block-title">Scrollable</div>
    <div class="block-header">Breadcrumbs will be scrollable if they don't fit the screen</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Catalog
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Phones
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Apple
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>

    <div class="block-title">Collapsed</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            Home
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-collapsed link popover-open" data-popover=".breadcrumbs-popover">
          <span></span>
          <div class="popover breadcrumbs-popover" style="width: 120px">
            <div class="popover-inner">
              <div class="list">
                <ul>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Catalog</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Phones</div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="item-link item-content popover-close">
                      <div class="item-inner">
                        <div class="item-title">Apple</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>

    <div class="block-title">With Icons</div>
    <div class="block block-strong">
      <div class="breadcrumbs">
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon f7-icons if-not-md">house_fill</i>
            <i class="icon material-icons if-md">home</i>
            <span>Home</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon f7-icons if-not-md">square_list_fill</i>
            <i class="icon material-icons if-md">list_alt</i>
            <span>Catalog</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon f7-icons if-not-md">device_phone_portrait</i>
            <i class="icon material-icons if-md">smartphone</i>
            <span>Phones</span>
          </a>
        </div>
        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item">
          <a href="#" class="link">
            <i class="icon f7-icons if-not-md">logo_apple</i>
            <i class="icon f7-icons if-md">logo_apple</i>
            <span>Apple</span>
          </a>
        </div>

        <div class="breadcrumbs-separator"></div>
        <div class="breadcrumbs-item breadcrumbs-item-active">
          iPhone 12
        </div>
      </div>
    </div>
  </div>

</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-breadcrumbs-spacing: 12px;
  --f7-breadcrumbs-padding: 2px 0;
  --f7-breadcrumbs-item-padding: 0px;
  --f7-breadcrumbs-item-bg-color: 0px;
  --f7-breadcrumbs-item-font-weight: normal;
  --f7-breadcrumbs-item-active-font-weight: 600;
  --f7-breadcrumbs-icon-size: 24px;
  --f7-breadcrumbs-item-color: rgba(0, 0, 0, 0.55);
  --f7-breadcrumbs-separator-color: rgba(0, 0, 0, 0.35);
  --f7-breadcrumbs-item-active-color: #000;
  --f7-breadcrumbs-collapsed-color: rgba(0, 0, 0, 0.75);
  --f7-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
}
:root .dark,
:root.dark {
  --f7-breadcrumbs-item-color: rgba(255, 255, 255, 0.75);
  --f7-breadcrumbs-separator-color: rgba(255, 255, 255, 0.35);
  --f7-breadcrumbs-item-active-color: #fff;
  --f7-breadcrumbs-collapsed-color: rgba(255, 255, 255, 0.75);
  --f7-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
  --f7-breadcrumbs-font-size: 17px;
}
.md {
  --f7-breadcrumbs-separator-icon: 'chevron_right_md';
  --f7-breadcrumbs-font-size: 16px;
}
.aurora {
  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
  --f7-breadcrumbs-font-size: 16px;
}