Navbar
Dokumentasi lan conto kanggo header navigasi Bootstrap sing kuat, responsif, navbar. Kalebu dhukungan kanggo branding, navigasi, lan liya-liyane, kalebu dhukungan kanggo plugin ambruk kita.
Cara kerjane
Mangkene sampeyan kudu ngerti sadurunge miwiti navbar:
- Navbars mbutuhake mbungkus
.navbar
karo.navbar-expand{-sm|-md|-lg|-xl}
kanggo responsif collapsing lan kelas skema werna . - Navbars lan isine minangka standar. Gunakake wadhah opsional kanggo mbatesi ambane horisontal.
- Gunakake kelas utilitas jarak lan fleksibel kanggo ngontrol jarak lan keselarasan ing navbar.
- Navbars responsif minangka standar, nanging sampeyan bisa kanthi gampang ngowahi kanggo ngganti. Prilaku responsif gumantung marang plugin Collapse JavaScript.
- Navbars didhelikake minangka standar nalika nyetak. Meksa supaya dicithak kanthi nambahake
.d-print
menyang.navbar
. Deleng kelas sarana tampilan . - Mesthekake aksesibilitas kanthi nggunakake
<nav>
unsur utawa, yen nggunakake unsur sing luwih umum kayata<div>
, tambahake arole="navigation"
kanggo saben navbar kanggo ngenali kanthi jelas minangka wilayah landmark kanggo pangguna teknologi assistive.
Efek animasi saka komponen iki gumantung marang prefers-reduced-motion
pitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .
Waca conto lan dhaptar sub-komponen sing didhukung.
Isi sing didhukung
Navbars dilengkapi dhukungan sing dibangun kanggo sawetara sub-komponen. Pilih saka ing ngisor iki yen perlu:
.navbar-brand
kanggo perusahaan, produk, utawa jeneng proyek sampeyan..navbar-nav
kanggo pandhu arah kanthi dhuwur lan entheng (kalebu dhukungan kanggo dropdown)..navbar-toggler
kanggo digunakake karo plugin ambruk lan prilaku toggling navigasi liyane..form-inline
kanggo kontrol lan tumindak apa wae..navbar-text
kanggo nambah strings vertikal tengah teks..collapse.navbar-collapse
kanggo klompok lan ndhelikake isi navbar dening breakpoint tiyang sepah.
Punika conto kabeh sub-komponen sing kalebu ing navbar tema cahya responsif sing kanthi otomatis ambruk ing lg
breakpoint (gedhe).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Conto iki nggunakake werna ( bg-light
) lan spasi ( my-2
, my-lg-0
, mr-sm-0
, my-sm-0
) kelas sarana.
Merk
.navbar-brand
Bisa ditrapake kanggo umume unsur, nanging jangkar paling apik amarga sawetara unsur mbutuhake kelas utilitas utawa gaya khusus .
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
Nambahake gambar ing gambar .navbar-brand
kasebut mesthi mbutuhake gaya khusus utawa keperluan kanggo ukuran sing bener. Kene sawetara conto kanggo nduduhake.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Bootstrap
</a>
</nav>
Nav
Tautan navigasi Navbar mbangun .nav
opsi kita karo kelas modifier dhewe lan mbutuhake kelas toggler kanggo gaya responsif sing tepat. Navigasi ing navbar uga bakal tuwuh kanggo ngenggoni spasi horisontal sabisa kanggo njaga isi navbar sampeyan kanthi aman.
Aktif negara-karo- .active
kanggo nunjukaké kaca saiki bisa Applied langsung menyang .nav-link
s utawa wong tuwa langsung .nav-item
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Lan amarga kita nggunakake kelas kanggo navs kita, sampeyan bisa supaya pendekatan adhedhasar dhaftar tanggung yen seneng.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>
Sampeyan uga bisa nggunakake dropdowns ing navbar nav. Menu gulung mudhun mbutuhake unsur bungkus kanggo posisi, dadi manawa sampeyan nggunakake unsur sing kapisah lan nested kanggo .nav-item
lan .nav-link
kaya ing ngisor iki.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Formulir
Selehake macem-macem kontrol wangun lan komponen ing navbar karo .form-inline
.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Elemen anak langsung .navbar
nggunakake tata letak fleksibel lan bakal dadi standar justify-content: space-between
. Gunakake utilitas fleksibel tambahan yen perlu kanggo nyetel prilaku iki.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Grup input uga bisa digunakake:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Macem-macem tombol didhukung minangka bagéan saka formulir navbar iki uga. Iki uga minangka pangeling sing apik yen utilitas alignment vertikal bisa digunakake kanggo nyelarasake unsur ukuran sing beda.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Teks
Navbar bisa ngemot potongan teks kanthi bantuan .navbar-text
. Kelas iki nyetel alignment vertikal lan spasi horisontal kanggo strings teks.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Nyampur lan cocog karo komponen lan keperluan liyane yen perlu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>
Skema warna
Theming navbar wis tau dadi luwih gampang thanks kanggo kombinasi kelas tema lan background-color
keperluan. Pilih saka .navbar-light
kanggo nggunakake werna latar mburi cahya, utawa .navbar-dark
kanggo werna latar mburi peteng. Banjur, setel karo .bg-*
keperluan.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Wadhah
Senajan iku ora dibutuhake, sampeyan bisa mbungkus navbar ing .container
tengah ing kaca utawa nambah siji ing mung tengah isi navbar ndhuwur tetep utawa statis .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Nalika wadhah kasebut ana ing navbar sampeyan, padding horisontal dicopot ing breakpoints sing luwih murah tinimbang .navbar-expand{-sm|-md|-lg|-xl}
kelas sing ditemtokake. Iki mesthekake yen kita ora ngganda ing padding tanpa perlu ing viewports ngisor nalika navbar sampeyan ambruk.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Panggonan
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed
, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top
on the <body>
) to prevent overlap with other elements.
Also note that .sticky-top
uses position: sticky
, which isn’t fully supported in every browser.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Responsive behaviors
Navbars can utilize .navbar-toggler
, .navbar-collapse
, and .navbar-expand{-sm|-md|-lg|-xl}
classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand
class on the navbar. For navbars that always collapse, don’t add any .navbar-expand
class.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand
, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
With no .navbar-brand
shown in lowest breakpoint:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
With a brand name shown on the left and toggler on the right:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
With a toggler on the left and brand name on the right:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
External content
Kadhangkala sampeyan pengin nggunakake plugin ambruk kanggo micu konten sing didhelikake ing papan liya ing kaca kasebut. Amarga kita plugin dianggo ing id
lan data-target
cocog, sing gampang rampung!
<div class="fixed-top">
<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">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>