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.
Breadcrumbs Layout
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 containerbreadcrumbs-item
- single breadcrumb item. Can contain any contentbreadcrumbs-item-active
- current/active navigation itembreadcrumbs-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
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);
}