Bạn đang tìm hiểu về cách tạo thanh điều hướng trong Bootstrap 5? Trong bài viết này, chúng ta sẽ khám phá những điều cơ bản về việc tạo thanh điều hướng cho trang web hoặc ứng dụng của bạn sử dụng Bootstrap 5.
Thanh điều hướng cơ bản
Với Bootstrap, bạn có thể tạo ra một thanh điều hướng có thể mở rộng hoặc thu gọn tùy thuộc vào kích thước màn hình. Một thanh điều hướng cơ bản trong Bootstrap 5 được tạo bằng class .navbar, sau đó là một class thu gọn tương ứng: .navbar-expand-xxl|xl|lg|md|sm (xếp chồng thanh điều hướng theo chiều dọc trên xxlarge, extra large, large, medium hoặc small screens). Để thêm các link vào thanh điều hướng, bạn cần sử dụng thành phần <ul> hoặc <div> cùng class="navbar-nav". Sau đó, thêm các thành phần <li> với class .nav-item, theo sau là thành phần <a> với class .nav-link.
Ví dụ:
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>Thanh điều hướng theo chiều dọc
Nếu bạn muốn thanh điều hướng hiển thị theo chiều dọc, bạn chỉ cần loại bỏ class .navbar-expand-*:
<!-- A grey vertical navbar -->
<nav class="navbar bg-light">
...
</nav>Thanh điều hướng nằm ở giữa
Để căn giữa thanh điều hướng, bạn có thể thêm class .justify-content-center:
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>Tô màu thanh điều hướng
Bạn có thể thay đổi màu nền của thanh điều hướng bằng cách sử dụng bất kỳ class .bg-color nào (ví dụ: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light). Để tô màu trắng cho các từ khóa chứa liên kết trong thanh điều hướng, bạn có thể sử dụng class .navbar-dark hoặc sử dụng class .navbar-light để thêm màu đen cho văn bản.
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
...
</nav>
<!-- Black background with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
...
</nav>
<!-- Blue background with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
...
</nav>Trạng thái hoạt động/vô hiệu hóa
Để highlight link hiện tại, bạn có thể thêm class .active vào thành phần <a>. Hoặc để hiển thị link không thể click, bạn có thể sử dụng class .disabled.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>Thương hiệu/Logo
Để làm nổi bật tên thương hiệu, logo hoặc dự án của trang, bạn có thể sử dụng class .navbar-brand:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>Khi sử dụng class .navbar-brand kèm với hình ảnh, Bootstrap 5 sẽ tự động điều chỉnh kích thước hình ảnh để khớp với thanh điều hướng theo chiều dọc.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>Văn bản trong thanh điều hướng
Bạn có thể sử dụng class .navbar-text để căn chỉnh theo chiều dọc các phần tử không chứa liên kết bên trong thanh điều hướng.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Navbar text</span>
</div>
</nav>Nút bấm và biểu mẫu trong thanh điều hướng
Bạn cũng có thể bao gồm biểu mẫu và nút bấm trong thanh điều hướng của mình. Bạn chỉ cần gói biểu mẫu và nút bấm vào thành phần <form> và .navbar-collapse.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>Thanh điều hướng cố định
Bạn có thể cố định thanh điều hướng của mình ở phía trên hoặc phía dưới cùng của trang. Để cố định thanh điều hướng ở phía đầu trang, bạn có thể sử dụng class .fixed-top. Để cố định thanh điều hướng ở phía dưới cùng, bạn có thể sử dụng class .fixed-bottom. Bạn cũng có thể sử dụng class .sticky-top để cố định thanh điều hướng ở phía đầu trang khi bạn cuộn qua nó. Lưu ý rằng class .sticky-top không hoạt động trong IE11 và các phiên bản trực quan hóa trước đó.
Code mẫu:
<!-- Cố định thanh điều hướng ở phía đầu trang -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
<!-- Cố định thanh điều hướng ở phía dưới cùng -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
<!-- Cố định thanh điều hướng ở phía đầu trang khi cuộn -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>Với những kiến thức trên, bạn đã biết cách tạo thanh điều hướng trong Bootstrap 5 cho trang web hoặc ứng dụng của mình. Hy vọng bài viết này hữu ích với bạn!
