SponsorsBecome a sponsor

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

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

breadcrumbs.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Breadcrumbs</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>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.</p>
      </div>
      <div class="block-title">Basic</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              Home
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a 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-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              Home
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              Catalog
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              Phones
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a 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-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a 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 class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">Catalog</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">Phones</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a 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-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a 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 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 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 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>
</template>
<script>
  export default (props, ctx) => {


    return $render;
  }

</script>

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-icon-size: 24px;
  --f7-breadcrumbs-separator-color: rgba(0, 0, 0, 0.35);
}
:root .dark,
:root.dark {
  --f7-breadcrumbs-separator-color: rgba(255, 255, 255, 0.35);
}
.ios {
  --f7-breadcrumbs-item-bg-color: transparent;
  --f7-breadcrumbs-collapsed-border-radius: 4px;
  --f7-breadcrumbs-collapsed-padding: 0px 6px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
  --f7-breadcrumbs-font-size: 17px;
  --f7-breadcrumbs-item-border-radius: 0px;
  --f7-breadcrumbs-item-padding: 0px;
  --f7-breadcrumbs-item-font-weight: normal;
  --f7-breadcrumbs-item-active-font-weight: 600;
  --f7-breadcrumbs-item-color: rgba(0, 0, 0, 0.55);
  --f7-breadcrumbs-item-active-color: #000;
  --f7-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(0, 0, 0, 0.75);
}
.ios .dark,
.ios.dark {
  --f7-breadcrumbs-item-color: rgba(255, 255, 255, 0.75);
  --f7-breadcrumbs-item-active-color: #fff;
  --f7-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-breadcrumbs-collapsed-border-radius: 8px;
  --f7-breadcrumbs-collapsed-padding: 12px 8px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_md';
  --f7-breadcrumbs-font-size: 14px;
  --f7-breadcrumbs-item-border-radius: 8px;
  --f7-breadcrumbs-item-padding: 4px 8px;
  --f7-breadcrumbs-item-font-weight: 500;
  --f7-breadcrumbs-item-active-font-weight: 500;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-breadcrumbs-item-color: var(--f7-theme-color);
  --f7-breadcrumbs-item-bg-color: var(--f7-md-secondary-container);
  --f7-breadcrumbs-item-active-color: var(--f7-md-on-secondary-container);
  --f7-breadcrumbs-collapsed-color: var(--f7-theme-color);
  --f7-breadcrumbs-collapsed-bg-color: var(--f7-md-secondary-container);
}
Improve this Doc
On this page