Bootstrap Nav

Trong hướng dẫn này, bạn sẽ học cách tạo menu điều hướng bằng thành phần Bootstrap Nav.

Thành phần của Bootstrap Nav

Bootstrap cung cấp một cách dễ dàng và nhanh chóng để tạo menu điều hướng cơ bản cũng như các thành phần như tab và pill rất linh hoạt và đẹp mắt. Tất cả các thành phần điều hướng của Bootstrap, bao gồm các tab và pill, chia sẻ cùng một kiểu mã cơ sở và kiểu thông qua lớp cơ sở .nav.

Tạo menu điều hướng cơ bản với Bootstrap

Bạn có thể sử dụng lớp Bootstrap .nav để tạo một menu điều hướng cơ bản, như sau:

<nav class="nav">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo điều hướng cơ bản với Bootstrap
Lưu ý: Bạn có thể sử dụng lớp .disabled để làm cho một liên kết giống như bị vô hiệu hóa. Tuy nhiên, lớp .disabled này chỉ thay đổi giao diện trực quan của liên kết bằng cách làm cho nó có màu xám và xóa hiệu ứng di chuột, tuy nhiên, liên kết sẽ vẫn có thể nhấp được trừ khi bạn xóa thuộc tính "href".

Căn chỉnh các phần tử trong Nav của Bootstrap

Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng căn chúng vào giữa hoặc phải bằng các tiện ích flexbox.

Ví dụ sau sử dụng lớp .justify-content-center để căn chỉnh các phần tử của menu điều hướng vào giữa.

<nav class="nav justify-content-center">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh các phần tử trong Nav của Bootstrap

Tương tự, bạn có thể căn chỉnh các phần tử của menu điều hướng sang phải bằng cách sử dụng lớp .justify-content-end, như thế này:

<nav class="nav justify-content-end">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh các phần tử trong Nav của Bootstrap

Hơn nữa, bạn thậm chí có thể xếp chồng các phần tử của menu điều hướng của mình theo chiều dọc bằng lớp .flex-column. Ngoài ra, nếu bạn muốn xếp menu điều hướng của mình theo chiều dọc trên các khung nhìn nhỏ hơn nhưng không phải trên các khung nhìn khác, hãy sử dụng nó với điểm ngắt đáp ứng (ví dụ .flex-sm-column:).

<nav class="nav flex-column">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh các phần tử trong Nav của Bootstrap

Tạo tab cơ bản với Bootstrap

Đơn giản, thêm lớp .nav-tabs vào menu điều hướng cơ bản để tạo điều hướng dạng tab, như sau:

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo tab cơ bản với Bootstrap

Xem hướng dẫn về tab của Bootstrap để tìm hiểu cách tạo tab động để chuyển đổi giữa các nội dung.

Bạn cũng có thể thêm các icon vào các thẻ tab của mình để làm cho nó hấp dẫn hơn, như được hiển thị ở đây:

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">
        <i class="bi-house-door"></i> Home
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-person"></i> Profile
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-envelope"></i> Messages
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="bi-bar-chart"></i> Reports
    </a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo tab cơ bản với Bootstrap

Xem hướng dẫn về các icon Bootstrap để biết cách sử dụng các icon trong Bootstrap. Ngoài ra, hãy xem các lớp icon Bootstrap để khám phá các icon được cung cấp bởi Bootstrap.

Tạo menu điều hướng bằng Nav Pill

Tương tự, bạn có thể tạo điều hướng dựa trên pill bằng cách thêm lớp .nav-pills trên menu điều hướng cơ bản thay vì lớp .nav-tabs, như được hiển thị trong ví dụ sau:

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <a href="#" class="nav-item nav-link">Messages</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu điều hướng bằng Nav Pill

Tương tự, giống như các tab điều hướng, bạn cũng có thể thêm các icon vào menu điều hướng pill để làm cho nó hấp dẫn hơn:

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">
        <i class="bi-house-door"></i> Home
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-person"></i> Profile
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-envelope"></i> Messages
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="bi-bar-chart"></i> Reports
    </a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu điều hướng bằng Nav Pill

Ngoài ra, bạn có thể áp dụng lớp .flex-column trên phần tử .nav để làm cho các pill xuất hiện xếp chồng lên nhau theo chiều dọc. Ngoài ra, bạn có thể sử dụng các phiên bản responsive (ví dụ .flex-sm-column) nếu bạn cần xếp chúng trên các khung nhìn cụ thể nhưng không phải trên các khung nhìn khác.

<nav class="nav nav-pills flex-column">
    <a href="#" class="nav-item nav-link active">
        <i class="bi-house-door"></i> Home
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-person"></i> Profile
    </a>
    <a href="#" class="nav-item nav-link">
        <i class="bi-envelope"></i> Messages
    </a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">
        <i class="bi-bar-chart"></i> Reports
    </a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu điều hướng bằng Nav Pill

Tạo menu thả xuống với Bootstrap Nav

Bạn có thể thêm menu thả xuống vào liên kết bên trong tab điều hướng và menu điều hướng pill với một chút mã bổ sung.

Bốn lớp CSS .dropdown, .dropdown-toggle, .dropdown-menu.dropdown-item được yêu cầu bổ sung cho .dropdown-menu hoặc các lớp để tạo menu thả xuống đơn giản bên trong tab và menu điều hướng pill mà không cần sử dụng bất kỳ mã JavaScript nào.

Tạo tab với menu thả xuống

Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống đơn giản vào một tab.

<nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Sent</a>
            <a href="#" class="dropdown-item">Drafts</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống với Bootstrap Nav

Tạo menu điều hướng pill với menu thả xuống

Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống đơn giản vào menu điều hướng pill.

<nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">Profile</a>
    <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Sent</a>
            <a href="#" class="dropdown-item">Drafts</a>
        </div>
    </div>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo menu thả xuống với Bootstrap Nav

Bạn sẽ tìm hiểu thêm về menu thả xuống ở phần sau trong chương menu thả xuống Bootstrap .

Căn chỉnh kích thước menu điều hướng Bootstrap Nav

Bạn có thể buộc các phần tử .nav-item của mình mở rộng và lấp đầy một cách tương ứng tất cả các chiều rộng có sẵn bằng cách sử dụng lớp .nav-fill trên phần tử .nav. Trong ví dụ sau, tất cả không gian ngang bị chiếm bởi các phần tử của menu điều hướng, nhưng mọi phần tử của menu điều hướng không có cùng chiều rộng.

<nav class="nav nav-pills nav-fill">
    <a href="#" class="nav-item nav-link">Home</a>
    <a href="#" class="nav-item nav-link">About</a>
    <a href="#" class="nav-item nav-link active">Explore Products</a>
    <a href="#" class="nav-item nav-link">Contact Us</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh kích thước menu điều hướng Bootstrap Nav

Ngoài ra, bạn có thể sử dụng lớp .nav-justified thay vì .nav-fill, nếu bạn muốn menu điều hướng lấp đầy tất cả không gian ngang cũng như mọi phần tử của menu điều hướng có cùng chiều rộng.

<nav class="nav nav-pills nav-justified">
    <a href="#" class="nav-item nav-link">Home</a>
    <a href="#" class="nav-item nav-link">About</a>
    <a href="#" class="nav-item nav-link active">Explore Products</a>
    <a href="#" class="nav-item nav-link">Contact Us</a>
</nav>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh kích thước menu điều hướng Bootstrap Nav
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.