Source

Navbar

Documentazione è esempi per l'intestazione di navigazione putente è responsiva di Bootstrap, a barra di navigazione. Include supportu per a marca, navigazione, è più, cumpresu supportu per u nostru plugin di colapsu.

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à aduprendu un <nav>elementu o, se utilizate 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 tecnulugii assistivi.

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

Leghjite per un esempiu è una lista di sub-cumpunenti supportati.

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 raggruppare è nascondere 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="#" 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>

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 ancore funziona megliu postu chì 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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Pudete ancu aduprà menu dropdown in u vostru navbar nav. 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="#" 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>

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 immediati per i zitelli in .navbarusu di u layout flex è predeterminatu à 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. Dopu, 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 nantu à una pagina o aghjunghje una 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, chì significheghja 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>

Cumportamenti rispunsevuli

Navbars ponu utilizà .navbar-toggler, .navbar-collapse, è e .navbar-expand{-sm|-md|-lg|-xl}classi per cambià 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 diritta. Inverte u vostru marcatu invierterà a piazza di u toggler. Quì sottu sò esempi di diversi stili di toggle.

Senza .navbar-brandmostratu in u puntu di breakpoint più bassu:

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

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

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

Cuntinutu esternu

A volte vulete usà u plugin di colapsu per attivà u cuntenutu oculatu in altrò in a pagina. Perchè u nostru plugin funziona nantu à ide data-targetcurrispundenza, questu hè facilmente fattu!

<div class="pos-f-t">
  <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>