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="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">返回</span>
          </a>
        </div>
        <div class="title">面包屑</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>面包屑导航允许用户跟踪和保持对应用程序或网站中位置的认识。
          它们应该用于具有层次结构排列的页面的大型站点和应用程序。</p>
      </div>
      <div class="block-title">基础</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              主页
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              分类
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            电话
          </div>
        </div>
      </div>

      <div class="block-title">可以滚动</div>
      <div class="block-header">如果屏幕放不下菜单可以滚动</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              主页
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              分类
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              电话
            </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">
            苹果12
          </div>
        </div>
      </div>

      <div class="block-title">可以折叠</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              主页
            </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">分类</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">电话</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">苹果</div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            苹果12
          </div>
        </div>
      </div>

      <div class="block-title">带图标</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>主页</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>分类</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>电话</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>苹果</span>
            </a>
          </div>

          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            苹果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