</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
- <nav class="navbar md:navbar-expand navbar-dark bg-dark fixed-top">
+ <nav class="navbar md:navbar-expand fixed-top" data-bs-theme="dark">
<a class="navbar-brand" href="#">Scrollspy test</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>
---
<header data-bs-theme="dark">
- <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
+ <nav class="navbar md:navbar-expand fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar lg:navbar-expand navbar-dark bg-primary mt-5">
+ <nav class="navbar lg:navbar-expand bg-primary mt-5" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
import Placeholder from "@shortcodes/Placeholder.astro"
---
-<nav class="navbar lg:navbar-expand fixed-top navbar-dark bg-dark" aria-label="Main navigation">
+<nav class="navbar lg:navbar-expand fixed-top" data-bs-theme="dark" aria-label="Main navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Drawer navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
<a class="btn-solid theme-primary btn-lg" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs »</a>
</div>
</main>
-<nav class="navbar fixed-bottom sm:navbar-expand navbar-dark bg-dark">
+<nav class="navbar fixed-bottom sm:navbar-expand" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
---
<main>
- <nav class="navbar navbar-dark bg-dark" aria-label="Dark drawer navbar">
+ <nav class="navbar" data-bs-theme="dark" aria-label="Dark drawer navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark drawer navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Drawer navbar large">
+ <nav class="navbar lg:navbar-expand" data-bs-theme="dark" aria-label="Drawer navbar large">
<div class="container-fluid">
<a class="navbar-brand" href="#">Responsive drawer navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Eighth navbar example">
+ <nav class="navbar lg:navbar-expand" data-bs-theme="dark" aria-label="Eighth navbar example">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Ninth navbar example">
+ <nav class="navbar lg:navbar-expand" data-bs-theme="dark" aria-label="Ninth navbar example">
<div class="xl:container">
<a class="navbar-brand" href="#">Container XL</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<p>Matching .xl:container...</p>
</div>
- <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Tenth navbar example">
+ <nav class="navbar lg:navbar-expand" data-bs-theme="dark" aria-label="Tenth navbar example">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
<header>
<!-- Fixed navbar -->
- <nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
+ <nav class="navbar md:navbar-expand fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">