Navbar là thanh điều hướng chính nằm ngang, thường đặt ở đầu trang, Navbar được thiết kế với tính năng responsive, trong đó chứa các thành phần như biểu tượng của website, nhãn thương hiệu, các menu đổ xuống, các nút bấm ...

NavBar xây dựng từ .navbar kết hợp với .navbar-expand{-sm|-md|-lg|-xl} cộng với thiết lập dạng sáng tối là .navbar-dark hoặc .navbar-light cuối cùng là nền .bg-* hoặc tự thiết lập nền background với màu tùy chọn. Navbar sử dụng kỹ thuật FlexBox nên cũng cần quan tâm đến phần này trước: FlexBox trong Bootstrap

Cơ bản xây dựng một HTML Navbar sẽ như sau:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Brand-Logo</a>
   <button class="navbar-toggler" type="button"
           data-toggle="collapse" data-target="#my-nav-bar"
           aria-controls="my-nav-bar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="my-nav-bar">
        <!--HTML các thành phần trình bày trên Navbar-->
   </div>
</nav>

Cơ bản .navbar Như vậy bắt đầu bằng phần tử gốc .navbar sau đó là kết hợp với các phần tử định dạng khác như:

Hiện thị logo Phần tử con .navbar-brand ở trên hiện thị thương hiệu, luôn xuất hiện trên Navbar, có thể thiết lập nó là một Brand Text, một Brand Link, một Brand - Hình ảnh hoặc một Brank Link + Ảnh

Phần tử .navbar-toggler Ở trên có một <button≶ thiết lập lớp .navbar-toggler để tạo ra một Toggler Button, nút bấm này chỉ xuất hiện khi màn hình dưới kích thước thiết lập bởi .navbar-expand{-sm|-md|-lg|-xl}, khi bấm vào nó nó sẽ mở rộng Navbar đổ xuống để xuất hiện các thành phần bị ẩn. Hãy thiết lập thuộc tính phần tử này như code ví dụ ở trên, đảm bảo có các thuộc tính data-toggle="collapse" aria-expanded="false" và chú ý là data-target="#my-nav-bar" aria-controls="my-nav-bar" với my-nav-barid của phần tử chứa các phần nội dung trên NavBar (nút bấm, menu, form)

Khu vực trình bày nội dung NavBar

Các thành phần còn lại của NavBar sẽ trình bày trong một phần tử chứa có gán id.navbar-toggler liên kết đến qua thuộc tính data-target, aria-controls. Phần tử này cần thiết lập thuộc tính class="collapse navbar-collapse", hãy xem code ví dụ ở trên

Các nội dung cần thêm vào NavBar sẽ đưa vào trong phần tử chứa này, ta sẽ xem xét một vài loại thành phần thêm vào:

Thêm vào các Menu các mục menu xuất hiện trên Navbar được tạo ra từ phần tử .navbar-nav, phần tử con là .nav-item chứa link từ lớp .nav-link, cấu trúc này có dạng như sau:

<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Trang chủ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Học HTML</a>
    </li>

    <li class="nav-item">
        <a class="nav-link disabled" href="#">Gửi bài</a>
    </li>
</ul>

Mục nào ở trạng thái hoạt động thì cho thêm .active, link nào muốn vô hiệu thì thêm vào .nav-link lớp .disabled

Thêm vào DropDown Các .nav-item cũng có thể thiết lập là một Dropdown để có mục Menu thả xuống, ví dụ thêm theo cấu trúc như sau

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Menu đổ xuống
    </a>
    <div class="dropdown-menu" aria-labelledby="mydropdown">
        <a class="dropdown-item" href="#">Mục 1</a>
        <a class="dropdown-item" href="#">Mục 2 abc</a>
        <a class="dropdown-item" href="#">Mục 3 zyz abc</a>
    </div>
</li>