Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Thanh điều hướng

Tài liệu và ví dụ về tiêu đề điều hướng mạnh mẽ, đáp ứng của Bootstrap, thanh điều hướng. Bao gồm hỗ trợ xây dựng thương hiệu, điều hướng và hơn thế nữa, bao gồm hỗ trợ cho plugin thu gọn của chúng tôi.

Trên trang này

Làm thế nào nó hoạt động

Đây là những điều bạn cần biết trước khi bắt đầu với thanh điều hướng:

  • Navbars yêu cầu một gói .navbarcho các lớp .navbar-expand{-sm|-md|-lg|-xl|-xxl}thu gọn và phối màu đáp ứng .
  • Các thanh điều hướng và nội dung của chúng là linh hoạt theo mặc định. Thay đổi vùng chứa để giới hạn chiều ngang của chúng theo những cách khác nhau.
  • Sử dụng các lớp tiện ích giãn cách và linh hoạt của chúng tôi để kiểm soát khoảng cách và căn chỉnh trong các thanh điều hướng.
  • Các thanh điều hướng phản hồi theo mặc định, nhưng bạn có thể dễ dàng sửa đổi chúng để thay đổi điều đó. Hành vi đáp ứng phụ thuộc vào plugin Thu gọn JavaScript của chúng tôi.
  • Đảm bảo khả năng truy cập bằng cách sử dụng một <nav>phần tử hoặc nếu sử dụng một phần tử chung chung hơn chẳng hạn như a <div>, hãy thêm a role="navigation"vào mọi thanh điều hướng để xác định rõ ràng nó là một vùng mốc cho người dùng công nghệ hỗ trợ.
  • Cho biết mục hiện tại bằng cách sử dụng aria-current="page"cho trang hiện tại hoặc aria-current="true"cho mục hiện tại trong một tập hợp.
  • Tính năng mới trong v5.2.0: Các thanh điều hướng có thể được theo chủ đề với các biến CSS được đặt trong phạm vi .navbarlớp cơ sở. .navbar-lightđã không được dùng nữa và .navbar-darkđã được viết lại để ghi đè các biến CSS thay vì thêm các kiểu bổ sung.
Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

Nội dung được hỗ trợ

Navbars đi kèm với hỗ trợ tích hợp cho một số thành phần phụ. Chọn trong số các tùy chọn sau nếu cần:

  • .navbar-brandcho tên công ty, sản phẩm hoặc dự án của bạn.
  • .navbar-navđể có điều hướng đủ độ cao và nhẹ (bao gồm hỗ trợ trình đơn thả xuống).
  • .navbar-togglerđể sử dụng với plugin thu gọn của chúng tôi và các hành vi chuyển đổi điều hướng khác.
  • Tiện ích linh hoạt và giãn cách cho mọi hành động và điều khiển biểu mẫu.
  • .navbar-textđể thêm các chuỗi văn bản căn giữa theo chiều dọc.
  • .collapse.navbar-collapseđể nhóm và ẩn nội dung thanh điều hướng bằng điểm ngắt chính.
  • Thêm tùy chọn .navbar-scrollđể đặt max-heightvà cuộn nội dung thanh điều hướng mở rộng .

Dưới đây là ví dụ về tất cả các thành phần phụ có trong thanh điều hướng theo chủ đề ánh sáng đáp ứng tự động thu gọn tại lgđiểm ngắt (lớn).

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ví dụ này sử dụng các lớp tiện ích background ( bg-light) và spacing ( me-auto,, mb-2) mb-lg-0.me-2

Nhãn hiệu

Có .navbar-brandthể áp dụng cho hầu hết các phần tử, nhưng một neo hoạt động tốt nhất, vì một số phần tử có thể yêu cầu các lớp tiện ích hoặc kiểu tùy chỉnh.

Chữ

Thêm văn bản của bạn trong một phần tử với .navbar-brandlớp.

html 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Hình ảnh

Bạn có thể thay thế văn bản bên trong .navbar-brandbằng một <img>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Hình ảnh và văn bản

Bạn cũng có thể sử dụng một số tiện ích bổ sung để thêm hình ảnh và văn bản cùng một lúc. Lưu ý việc bổ sung .d-inline-blockvà .align-text-toptrên <img>.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Các liên kết điều hướng trên thanh điều hướng xây dựng dựa trên các .navtùy chọn của chúng tôi với lớp bổ trợ của riêng chúng và yêu cầu sử dụng các lớp chuyển đổi để tạo kiểu đáp ứng thích hợp. Điều hướng trong thanh điều hướng cũng sẽ phát triển để chiếm nhiều không gian theo chiều ngang nhất có thể để giữ cho nội dung thanh điều hướng của bạn được căn chỉnh an toàn.

Thêm .activelớp vào .nav-linkđể chỉ ra trang hiện tại.

Xin lưu ý rằng bạn cũng nên thêm aria-currentthuộc tính vào hoạt động .nav-link.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Và bởi vì chúng tôi sử dụng các lớp cho nav của chúng tôi, bạn có thể tránh hoàn toàn cách tiếp cận dựa trên danh sách nếu bạn muốn.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Bạn cũng có thể sử dụng danh sách thả xuống trong thanh điều hướng của mình. Menu thả xuống yêu cầu một phần tử bao bọc để định vị, vì vậy hãy đảm bảo sử dụng các phần tử riêng biệt và lồng nhau cho .nav-itemvà .nav-linknhư được hiển thị bên dưới.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Các hình thức

Đặt các thành phần và điều khiển biểu mẫu khác nhau trong thanh điều hướng:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Các phần tử con ngay lập tức của .navbarsử dụng bố cục flex và sẽ mặc định thành justify-content: space-between. Sử dụng các tiện ích flex bổ sung nếu cần để điều chỉnh hành vi này.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Nhóm đầu vào cũng hoạt động. Nếu thanh điều hướng của bạn là toàn bộ biểu mẫu hoặc hầu hết là một biểu mẫu, bạn có thể sử dụng <form>phần tử làm vùng chứa và lưu một số HTML.

html 
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Các nút khác nhau cũng được hỗ trợ như một phần của các biểu mẫu thanh điều hướng này. Đây cũng là một lời nhắc nhở tuyệt vời rằng các tiện ích căn chỉnh theo chiều dọc có thể được sử dụng để căn chỉnh các phần tử có kích thước khác nhau.

html 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Chữ

Navbars có thể chứa các bit văn bản với sự trợ giúp của .navbar-text. Lớp này điều chỉnh căn chỉnh theo chiều dọc và khoảng cách theo chiều ngang cho các chuỗi văn bản.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Trộn và kết hợp với các thành phần và tiện ích khác khi cần thiết.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Phối màu

Tính năng mới trong v5.2.0: Chủ đề thanh điều hướng hiện được hỗ trợ bởi các biến CSS và .navbar-lightkhông được dùng nữa. Các biến CSS được áp dụng cho .navbar, mặc định là giao diện "nhẹ" và có thể được ghi đè bằng .navbar-dark.

Các chủ đề của Navbar trở nên dễ dàng hơn bao giờ hết nhờ sự kết hợp của Bootstrap giữa các biến Sass và CSS. Mặc định là “light navbar” của chúng tôi để sử dụng với màu nền sáng, nhưng bạn cũng có thể áp dụng .navbar-darkcho màu nền tối. Sau đó, tùy chỉnh bằng .bg-*các tiện ích.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Hộp đựng

Mặc dù nó không bắt buộc, nhưng bạn có thể quấn thanh điều hướng vào .containergiữa để căn giữa trang – mặc dù lưu ý rằng vẫn cần có một vùng chứa bên trong. Hoặc bạn có thể thêm một vùng chứa bên trong .navbarđể chỉ căn giữa nội dung của thanh điều hướng trên cùng cố định hoặc tĩnh .

html 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Sử dụng bất kỳ vùng chứa đáp ứng nào để thay đổi độ rộng của nội dung trong thanh điều hướng của bạn.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Vị trí

Sử dụng các tiện ích định vị của chúng tôi để đặt các thanh điều hướng ở các vị trí không tĩnh. Chọn từ cố định ở trên cùng, cố định ở dưới cùng, cố định ở trên cùng (cuộn với trang cho đến khi trang lên đến đầu, sau đó ở đó) hoặc cố định ở dưới cùng (cuộn với trang cho đến khi nó xuống dưới cùng, sau đó giữ nguyên ở đó).

Đã sửa lỗi sử dụng thanh điều hướng position: fixed, nghĩa là chúng được kéo từ luồng thông thường của DOM và có thể yêu cầu CSS tùy chỉnh (ví dụ: padding-toptrên <body>) để ngăn chồng chéo với các phần tử khác.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Cuộn

Thêm .navbar-nav-scrollvào .navbar-nav(hoặc thành phần phụ khác của thanh điều hướng) để cho phép cuộn dọc trong nội dung có thể chuyển đổi của thanh điều hướng thu gọn. Theo mặc định, cuộn sẽ bắt đầu ở 75vh(hoặc 75% chiều cao của khung nhìn), nhưng bạn có thể ghi đè điều đó bằng thuộc tính tùy chỉnh CSS cục bộ --bs-navbar-heighthoặc kiểu tùy chỉnh. Tại các cửa sổ xem lớn hơn khi thanh điều hướng được mở rộng, nội dung sẽ xuất hiện như trong thanh điều hướng mặc định.

Xin lưu ý rằng hành vi này đi kèm với một nhược điểm tiềm ẩn là overflow— khi cài đặt overflow-y: auto(bắt buộc để cuộn nội dung ở đây), overflow-xtương đương với auto, sẽ cắt một số nội dung theo chiều ngang.

Đây là một ví dụ về thanh điều hướng sử dụng .navbar-nav-scrollwith style="--bs-scroll-height: 100px;", với một số tiện ích lề bổ sung để có khoảng cách tối ưu.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Hành vi đáp ứng

Các thanh điều hướng có thể sử dụng .navbar-togglervà .navbar-collapsecác .navbar-expand{-sm|-md|-lg|-xl|-xxl}lớp để xác định thời điểm nội dung của chúng bị thu gọn sau một nút. Kết hợp với các tiện ích khác, bạn có thể dễ dàng chọn thời điểm hiển thị hoặc ẩn các phần tử cụ thể.

Đối với các thanh điều hướng không bao giờ thu gọn, hãy thêm .navbar-expandlớp trên thanh điều hướng. Đối với các thanh điều hướng luôn thu gọn, không thêm bất kỳ .navbar-expandlớp nào.

Người chuyển đổi

Các trình chuyển đổi của thanh điều hướng được căn trái theo mặc định, nhưng nếu chúng đi theo một phần tử anh em như a .navbar-brand, chúng sẽ tự động được căn chỉnh về phía ngoài cùng bên phải. Đảo ngược đánh dấu của bạn sẽ đảo ngược vị trí của trình chuyển đổi. Dưới đây là các ví dụ về các kiểu chuyển đổi khác nhau.

Không .navbar-brandhiển thị ở điểm ngắt nhỏ nhất:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Với tên thương hiệu được hiển thị ở bên trái và nút chuyển đổi ở bên phải:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Với một nút xoay ở bên trái và tên thương hiệu ở bên phải:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Nội dung bên ngoài

Đôi khi bạn muốn sử dụng plugin thu gọn để kích hoạt phần tử vùng chứa cho nội dung có cấu trúc nằm bên ngoài .navbar. Bởi vì plugin của chúng tôi hoạt động dựa trên idvà data-bs-targetđối sánh, điều đó dễ dàng được thực hiện!

html 
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Khi bạn làm điều này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung để di chuyển tiêu điểm theo chương trình đến vùng chứa khi nó được mở. Nếu không, người dùng bàn phím và người dùng công nghệ hỗ trợ có thể sẽ gặp khó khăn trong việc tìm kiếm nội dung mới được tiết lộ - đặc biệt nếu vùng chứa được mở ra trước trình chuyển đổi trong cấu trúc của tài liệu. Chúng tôi cũng khuyên bạn nên đảm bảo rằng trình chuyển đổi có aria-controlsthuộc tính, trỏ đến vùng idchứa nội dung. Về lý thuyết, điều này cho phép người dùng công nghệ hỗ trợ chuyển trực tiếp từ bộ chuyển đổi sang bộ chứa mà nó kiểm soát - nhưng việc hỗ trợ cho việc này hiện khá chắp vá.

Offcanvas

Chuyển thanh điều hướng mở rộng và thu gọn của bạn thành ngăn kéo offcanvas với thành phần offcanvas . Chúng tôi mở rộng cả các kiểu mặc định offcanvas và sử dụng các .navbar-expand-*lớp của chúng tôi để tạo một thanh bên điều hướng linh hoạt và năng động.

Trong ví dụ dưới đây, để tạo một thanh điều hướng offcanvas luôn được thu gọn trên tất cả các điểm ngắt, hãy bỏ qua .navbar-expand-*hoàn toàn lớp.

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Để tạo một thanh điều hướng offcanvas mở rộng thành một thanh điều hướng bình thường tại một điểm ngắt cụ thể như lg, hãy sử dụng .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Khi sử dụng offcanvas trong thanh điều hướng tối, hãy lưu ý rằng bạn có thể cần phải có nền tối cho nội dung offcanvas để tránh văn bản trở nên khó đọc. Trong ví dụ dưới đây, chúng tôi thêm .navbar-darkvà .bg-darkvào .navbar, .text-bg-darkvào .offcanvas, .dropdown-menu-darkđến .dropdown-menuvà .btn-close-whiteđể .btn-closetạo kiểu phù hợp với offcanvas tối.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các thanh điều hướng hiện sử dụng các biến CSS cục bộ trên .navbarđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Một số biến CSS bổ sung cũng có trên .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Tùy chỉnh thông qua các biến CSS có thể được nhìn thấy trên .navbar-darklớp nơi chúng tôi ghi đè các giá trị cụ thể mà không thêm các bộ chọn CSS trùng lặp.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Biến Sass

Các biến cho tất cả các thanh điều hướng:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Các biến cho thanh điều hướng tối :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Vòng lặp Sass

Các lớp mở rộng / thu gọn của thanh điều hướng đáp ứng (ví dụ .navbar-expand-lg:) được kết hợp với $breakpointsbản đồ và được tạo thông qua một vòng lặp trong scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}