Home  >  Article  >  Web Front-end  >  How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

青灯夜游
青灯夜游forward
2021-11-25 19:17:072636browse

How to add breadcrumb navigation in

Bootstrap? The following article will introduce to you how to use the Bootstrap5 breadcrumb navigation component. I hope it will be helpful to you!

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

1 Breadcrumb navigation

Breadcrumb navigation is generally used under the navigation bar at the top of the website to indicate the level of the current page in the navigation hierarchy. Generally used > Or | and space separation, Bootstrap5 breadcrumb navigation automatically adds separators through CSS. [Related recommendations: "bootstrap Tutorial"]

In the picture below, the row of small navigation below the navigation bar is a common breadcrumb navigation

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

Example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>面包屑演示</title>
  </head>
  <body>
      <br><br>
        <nav aria-label="breadcrumb">
        <ol>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
        </ol>
        </nav>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

2 Custom separator

2.1 By modifying local CSS custom properties

In the following code, add a style="--bs-breadcrumb-divider: '>';"You can use > as the dividing symbol, or you can change it to any other character .

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>面包屑演示</title>
  </head>
  <body>
      <br><br>
        <nav style="--bs-breadcrumb-divider: &#39;>&#39;;" aria-label="breadcrumb">
        <ol>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
        </ol>
        </nav>
        
        <nav style="--bs-breadcrumb-divider: &#39;|&#39;;" aria-label="breadcrumb">
            <ol>
            <li><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
            </ol>
            </nav>

            <nav style="--bs-breadcrumb-divider: &#39;-&#39;;" aria-label="breadcrumb">
                <ol>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
                </ol>
                </nav>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

2.2 Using icons or images

The above example can also use embedded SVG icons.

 <nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;8&#39; height=&#39;8&#39;%3E%3Cpath d=&#39;M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z&#39; fill=&#39;currentColor&#39;/%3E%3C/svg%3E");" aria-label="breadcrumb">
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">新闻</a></li>
        <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
        </ol>
        </nav>

How to add breadcrumb navigation in Bootstrap? Brief analysis of methods

2.3 Do not use separator

You can also remove the separator setting--bs-breadcrumb-divider: '';(CSS custom property Empty strings in will be counted as one value).

<nav style="--bs-breadcrumb-divider: &#39;&#39;;" aria-label="breadcrumb">
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">新闻</a></li>
            <li class="breadcrumb-item active" aria-current="page">国内新闻</li>
            </ol>
            </nav>

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of How to add breadcrumb navigation in Bootstrap? Brief analysis of methods. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete