Navbar
Dokumentasi lan conto kanggo header navigasi Bootstrap sing kuat, responsif, navbar. Kalebu dhukungan kanggo branding, navigasi, plugin ambruk, lan liya-liyane.
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.
prefers-reduced-motion
pitakon media. Deleng
bagean gerakan suda saka dokumentasi aksesibilitas kita .
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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<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">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 sarana 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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
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">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">Disabled</a>
</div>
</div>
</nav>
Sampeyan uga bisa nggunakake dropdown ing navbar. 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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<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 kanggo 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
Sanajan ora dibutuhake, sampeyan bisa mbungkus navbar ing .container
tengah ing kaca. Utawa sampeyan bisa nambah wadhah nang .navbar
kanggo 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
Gunakake utilitas posisi kita kanggo nyelehake navbar ing posisi non-statis. Pilih saka tetep menyang ndhuwur, tetep menyang ngisor, utawa nempel ing ndhuwur (gulung karo kaca nganti tekan ndhuwur, banjur tetep ana). Navbar tetep nggunakake position: fixed
, tegese lagi ditarik saka aliran normal DOM lan mbutuhake CSS khusus (contone, padding-top
ing <body>
) kanggo nyegah tumpang tindih karo unsur liyane.
Elinga uga .sticky-top
nggunakake position: sticky
, sing ora didhukung kanthi lengkap ing saben 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>
Nggulung
Tambah .navbar-nav-scroll
menyang .navbar-collapse
(utawa sub-komponen navbar liyane) kanggo ngaktifake nggulung vertikal ing isi toggleable saka navbar ambruk. Kanthi gawan, gulung mlebu ing 75vh
(utawa 75% saka dhuwur viewport), nanging sampeyan bisa ngganti karo gaya inline utawa adat. Ing viewport luwih gedhe nalika navbar ditambahi, isi bakal katon kaya ing navbar standar.
Wigati dimangerteni menawa prilaku iki ana kemungkinan overflow
cacat - nalika nyetel overflow-y: auto
(dibutuhake kanggo nggulung konten ing kene), overflow-x
padha karo auto
, sing bakal ngethok sawetara konten horisontal.
Punika conto navbar nggunakake .navbar-nav-scroll
karo style="max-height: 100px;"
, karo sawetara keperluan margin ekstra kanggo spasi paling luweh.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<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="#" role="button" data-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">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Tumindak responsif
Navbars bisa nggunakake .navbar-toggler
, .navbar-collapse
, lan .navbar-expand{-sm|-md|-lg|-xl}
kelas kanggo nemtokake nalika isi sing ambruk konco tombol. Ing kombinasi karo keperluan liyane, sampeyan bisa kanthi gampang milih nalika nuduhake utawa ndhelikake unsur tartamtu.
Kanggo navbar sing ora tau ambruk, nambah .navbar-expand
kelas ing navbar. Kanggo navbar sing tansah ambruk, ora nambah .navbar-expand
kelas sembarang.
Toggler
Toggler Navbar didadekake siji kiwa minangka standar, nanging yen padha ngetutake unsur sedulur kaya a .navbar-brand
, bakal kanthi otomatis didadekake siji ing sisih tengen. Mbalikake markup sampeyan bakal mbalikke panggonan toggler. Ing ngisor iki conto gaya toggle sing beda.
Tanpa .navbar-brand
ditampilake ing breakpoint paling cilik:
<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">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>
Kanthi jeneng merek ditampilake ing sisih kiwa lan toggler ing sisih tengen:
<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">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>
Kanthi toggler ing sisih kiwa lan jeneng merek ing sisih tengen:
<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">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>
Isi njaba
Kadhangkala sampeyan pengin nggunakake plugin ambruk kanggo micu unsur wadhah kanggo konten sing sacara struktural dumunung ing njaba .navbar
. 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>
Nalika sampeyan nindakake iki, disaranake kalebu JavaScript tambahan kanggo mindhah fokus programmatically kanggo wadhah nalika dibukak. Yen ora, pangguna keyboard lan pangguna teknologi pitulung bakal angel nemokake konten sing mentas dicethakake - utamane yen wadhah sing dibukak sadurunge toggler ing struktur dokumen. Disaranake uga priksa manawa toggler duwe aria-controls
atribut, ngarahake menyang id
wadhah konten. Ing teori, iki ngidini pangguna teknologi asisten langsung mlumpat saka toggler menyang wadhah sing dikontrol-nanging dhukungan kanggo iki saiki rada kurang.