在此页

• 要求
• Recipe
• Choices made
• 可访问性关注
• 浏览器兼容性
• 另请参阅
• 相关话题

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.

要求

The items typically display inline with a separator to indicate a hierarchy between individual pages.

Recipe

Download this example

注意 : The example above uses two selectors to insert content before every li except the first one. This could also be achieved using one selector only:

.breadcrumb li:not(:first-child)::before {
  content: "→";
}
					

This solution uses a more complex selector, but requires less rules. Feel free to choose the solution that you prefer.

Choices made

This pattern is laid out using a simple flex layout demonstrating how a line of CSS can give us our navigation. The separators are added using CSS Generated Content. You could change these to any separator that you like.

可访问性关注

I have used the aria-label and aria-current attributes to help users understand what this navigation is and where the current page is in the structure. See the related links for more information.

浏览器兼容性

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Flexbox

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
flex	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0 . 注意事项 Until Firefox 61, flex items that are sized according to their content are sized using fit-content , not max-content . 不支持 18 — 28 Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11 注意事项 完整支持 11 注意事项 注意事项 Internet Explorer 11 ignores uses of calc() 在 flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. 注意事项 Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. 完整支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Internet Explorer 10 and 11 ignore uses of calc() 在 flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. 注意事项 Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0 . 注意事项 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content . 不支持 18 — 28 Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• CSS 的灵活框布局
• Providing a Breadcrumb Trail
• Using the aria-current attribute

元数据

• 最后修改： Jul 22, 2020

相关话题

1. CSS
2. CSS 参考
3. Layout cookbook
4. 指南

   1. Breadcrumb Navigation
   2. Card
   3. Center an element
   4. Column layouts
   5. Contribute a recipe
   6. Grid wrapper
   7. List group with badges
   8. Pagination
   9. Recipe: Media objects
   10. Split Navigation
   11. Sticky footers