in English

Navbar

Documentazione è esempi per l'intestazione di navigazione putente è responsiva di Bootstrap, a barra di navigazione. Include supportu per branding, navigazione, collapse plugin, è più.

Cumu funziona

Eccu ciò chì avete bisognu di sapè prima di principià cù a barra di navigazione:

  • I Navbars necessitanu un avvolgimentu .navbarcù .navbar-expand{-sm|-md|-lg|-xl}per classi di collapsing responsive è schema di culori .
  • Navbars è u so cuntenutu sò fluidi per difettu. Aduprate cuntenituri opzionali per limità a so larghezza horizontale.
  • Aduprate e nostre classi di utilità di spaziatura è flex per cuntrullà u spaziamentu è l'allineamentu in i navbars.
  • Navbars sò rispunsevuli per automaticamente, ma pudete facilmente mudificà per cambià. U cumpurtamentu responsive dipende da u nostru plugin JavaScript Collapse.
  • I Navbars sò oculati per difettu durante a stampa. Forza à esse stampati aghjunghjendu .d-printà u .navbar. Vede a classa di utilità di visualizazione .
  • Assicurà l'accessibilità utilizendu un <nav>elementu o, s'ellu si usa un elementu più genericu cum'è un <div>, aghjunghje un role="navigation"à ogni navbar per identificà esplicitamente cum'è una regione di riferimentu per l'utilizatori di tecnulugia assistive.
L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Cuntenutu supportatu

Navbars venenu cù supportu integratu per una manciata di sub-cumpunenti. Sceglite trà i seguenti cum'è necessariu:

  • .navbar-brandper a vostra cumpagnia, produttu o nome di prughjettu.
  • .navbar-navper una navigazione à tutta l'altezza è ligera (cumpresu supportu per dropdowns).
  • .navbar-togglerper l'usu cù u nostru plugin di colapsu è altri cumpurtamenti di navigazione .
  • .form-inlineper qualsiasi cuntrolli di forma è azzioni.
  • .navbar-textper aghjunghje stringhe di testu centrate verticalmente.
  • .collapse.navbar-collapseper raggruppà è nasconde u cuntenutu di a barra di navigazione da un puntu di ruptura parente.

Eccu un esempiu di tutti i sub-cumpunenti inclusi in una navbar di tematica luminosa rispunsiva chì collapses automaticamente à u puntu di lgrottura (grande).

<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>

Questu esempiu usa classi di utilità di culore ( bg-light) è spaziatura ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

Pò .navbar-brandesse appiicatu à a maiò parte di l'elementi, ma un ancora funziona megliu, cum'è certi elementi puderanu dumandà classi di utilità o stili persunalizati.

<!-- 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>

L'aghjunzione di l'imaghjini à a .navbar-brandvuluntà serà sempre bisognu di stili persunalizati o utilità per a dimensione curretta. Eccu alcuni esempi per dimustrà.

<!-- 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>

I ligami di navigazione Navbar si basanu nantu à e nostre .navopzioni cù a so propria classa di modificatore è esigenu l'usu di classi toggler per un stile di rispunsibilità propiu. A navigazione in navbars cresce ancu per occupà u più spaziu horizontale pussibule per mantene u vostru cuntenutu di navbar allineatu in modu sicuru.

I stati attivi - cù .active- per indicà a pagina attuale pò esse appiicata direttamente à .nav-links o à i so parenti immediati .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>

È perchè usemu classi per i nostri navs, pudete evità l'approcciu basatu in lista interamente se ti piace.

<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>

Pudete ancu aduprà dropdowns in a vostra barra di navigazione. I menu dropdown necessitanu un elementu di imballaggio per u posizionamentu, cusì assicuratevi di utilizà elementi separati è nidificati per .nav-itemè .nav-linkcum'è mostratu quì sottu.

<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>

Forme

Pone diversi cuntrolli di forma è cumpunenti in una barra di navigazione cù .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>

Elementi di i zitelli immediati di .navbarusu flex layout è predeterminate à justify-content: space-between. Aduprate utilità flex supplementari quantu necessariu per aghjustà stu cumpurtamentu.

<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>

I gruppi di input funzionanu ancu:

<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>

Diversi buttoni sò supportati ancu cum'è parte di queste forme di navbar. Questu hè ancu un grande ricordu chì l'utilità di allineamentu verticale ponu esse aduprate per allineà elementi di diverse dimensioni.

<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>

Testu

Navbars pò cuntene pezzi di testu cù l'aiutu di .navbar-text. Questa classa aghjusta l'allineamentu verticale è u spaziu horizontale per e stringhe di testu.

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

Imbulighjate è abbinate cù altri cumpunenti è utilità cum'è necessariu.

<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>

Schemi di culori

Theming the navbar ùn hè mai statu più faciule grazia à a cumminazione di classi di tematiche è background-colorutilità. Sceglite .navbar-lightper l'usu cù culori di fondu chjaru, o .navbar-darkper culori di fondu scuru. Allora, persunalizà cù .bg-*utilità.

<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>

Contenituri

Ancu s'ellu ùn hè micca necessariu, pudete imbulighjà una barra di navigazione in un .containercentru per centru in una pagina. O pudete aghjunghje un cuntinuu in u .navbarcentru per centru solu u cuntenutu di una barra di navigazione superiore fissa o statica .

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

Quandu u cuntinuu hè in a vostra barra di navigazione, u so padding horizontale hè sguassatu à i punti di rottura più bassi di a vostra .navbar-expand{-sm|-md|-lg|-xl}classe specifica. Questu assicura chì ùn duppiemu micca l'imbottitura inutilmente in i vetri più bassi quandu a vostra barra di navigazione hè colapsata.

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

Placement

Aduprate e nostre utilità di pusizioni per mette navbars in pusizioni non statiche. Sceglite da fissu à a cima, fissu à u fondu, o appiccicatu à a cima (scrolls cù a pagina finu à ch'ella ghjunghje in cima, poi ferma quì). I navbars fissi utilizanu position: fixed, vale à dì chì sò tirati da u flussu normale di u DOM è ponu esse bisognu di CSS persunalizati (per esempiu, padding-topnantu à <body>) per impediscenu a sovrapposizione cù altri elementi.

Innota ancu chì .sticky-topusa position: sticky, chì ùn hè micca cumplettamente supportatu in ogni navigatore .

<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>

Scrolling

Aghjunghjite .navbar-nav-scrollà un .navbar-collapse(o un altru sub-componente di a barra di navigazione) per attivà u scrolling verticale in u cuntenutu basculable di una barra di navigazione colapsata. Per automaticamente, u scrolling si mette in 75vh(o 75% di l'altezza di a vista), ma pudete annullà quellu cù stili inline o persunalizati. À viste più grande quandu a barra di navigazione hè allargata, u cuntenutu apparirà cum'è in una barra di navigazione predeterminata.

Per piacè nutate chì stu cumpurtamentu vene cun un svantaghju potenziale di overflow-quandu l'impostazione overflow-y: auto(necessariu per scrollà u cuntenutu quì), overflow-xhè l'equivalente di auto, chì tagliarà qualchì cuntenutu horizontale.

Eccu un esempiu di navbar .navbar-nav-scrollcù style="max-height: 100px;", cù alcune utilità di margine extra per un spaziu ottimale.

<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>

Cumportamenti rispunsevuli

Navbars ponu aduprà .navbar-toggler, .navbar-collapse, è .navbar-expand{-sm|-md|-lg|-xl}classi per determinà quandu u so cuntenutu colapsà daretu à un buttone. In cumbinazione cù altre utilità, pudete facilmente sceglie quandu mostra o ammuccià elementi particulari.

Per i navbars chì ùn colapsanu mai, aghjunghje a .navbar-expandclassa nantu à a navbar. Per i navbars chì sempre colapsanu, ùn aghjunghje micca .navbar-expandclassi.

Toggler

I togglers di Navbar sò allineati à manca per difettu, ma se seguitanu un elementu fratellu cum'è un .navbar-brand, seranu automaticamente allinati à l'estrema destra. Inverte u vostru marcatu invierterà a piazza di u toggler. Quì sottu sò esempi di diversi stili di toggle.

Senza .navbar-brandmostratu à u puntu di pausa più chjucu:

<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>

Cù un nome di marca mostratu à manca è toggler à diritta:

<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>

Cù un toggler à manca è a marca à a diritta:

<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>

Cuntinutu esternu

A volte vulete usà u plugin di colapsu per attivà un elementu di cuntainer per u cuntenutu chì strutturalmente si trova fora di u .navbar. Perchè u nostru plugin funziona nantu à ide data-targetcurrispundenza, questu hè facilmente fattu!

<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>

Quandu fate questu, ricumandemu di include JavaScript supplementu per trasfurmà u focu programmaticamente à u cuntinuu quandu hè apertu. Altrimenti, l'utilizatori di u teclatu è l'utilizatori di tecnulugii d'assistenza prubabilmente averebbenu difficultà à truvà u cuntenutu novu revelatu - in particulare se u cuntainer chì hè statu apertu vene prima di u toggler in a struttura di u documentu. Hè ricumandemu ancu di assicurà chì u toggler hà l' aria-controlsattributu, indicà à idu cuntenutu di u cuntenutu. In teoria, questu permette à l'utilizatori di tecnulugia d'assistenza per saltà direttamente da u toggler à u cuntainer chì cuntrolla, ma u supportu per questu hè attualmente abbastanza irregulare.