English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Breadcrumbs is a navigation scheme that indicates the location of the current page in the website or application to the user. Breadcrumbs navigation can greatly enhance the accessibility of websites with a large number of pages or complex navigation hierarchies.
Breadcrumbs navigation is a display method based on the hierarchical information of the website. Taking a blog as an example, breadcrumbs navigation can display the publication date, category, or tag. They represent the position of the current page in the navigation hierarchy and are a navigation aid in the user interface.
Breadcrumbs navigation in Bootstrap is a simple navigation with .breadcrumb class of the unordered list. The separators are added through CSS (bootstrap.min.css) with ::before and content, and the following class is automatically added:
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: "#6c757d;
content: "/";
}You can use Bootstrap to create a static breadcrumbs layout by simply using the .breadcrumb class on the ordered list, as shown in the following Bootstrap4 Breadcrumbs Navigation Example
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> </body> </html>Test and See ‹/›
We can also not use the list form:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script> </head> <body> <nav class="breadcrumb"> <a class="breadcrumb-item href="#">Home</a> <a class="breadcrumb-item href="#">Library</a> <a class="breadcrumb-item href="#">Data</a> <span class="breadcrumb-item active">Bootstrap</span> </nav> </body> </html>Test and See ‹/›
The effect after running is as follows: