Navigation

Onglets

La navigation par onglet est une alternative au composant de navigation de navigation classique. L'affichage par onglet se base sur la classe parente .nav-tabs. Ce composant est un composant natif du framework Bootstrap et utilise le plugin Javascript tab dédié.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste ex voluptatum odit asperiores, modi porro fugiat quaerat dolores cum rem ullam minima nam cupiditate ab, pariatur necessitatibus numquam, fugit non.

Salade
Tomates
Oignons

Sauce blanche
Sauce Samouraï
Mayonnaise
Ketchup

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a href="#" class="nav-link active show" data-toggle="tab" role="tab" aria-controls="" aria-selected="true">
            Onglet actif
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-toggle="tab" role="tab" aria-controls="" aria-selected="false">
            Onglet
        </a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-toggle="tab" role="tab" aria-controls="" aria-selected="false">
            Onglet
        </a>
    </li>
</ul>

Onglets avec badges

Salade
Tomates
Oignons

Sauce blanche
Sauce Samouraï
Mayonnaise
Ketchup

Onglets avec compteurs

BETA Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste ex voluptatum odit asperiores, modi porro fugiat quaerat dolores cum rem ullam minima nam cupiditate ab, pariatur necessitatibus numquam, fugit non.

Salade
Tomates
Oignons

Sauce blanche
Sauce Samouraï
Mayonnaise
Ketchup

Dropdown

Les dropdowns sont utiles pour certains cas comme le bouton Aide dans le menu principal ou les autres actions sur les fiches patients.

<div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Bouton dropdown
    </button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Salade</a>
        <a href="#" class="dropdown-item">Tomates</a>
        <a href="#" class="dropdown-item">Oignons</a>
    </div>
</div>

Il est possible d'ajouter la classe .dropdown-menu-right pour aligner le dropdown sur par la droite du bouton déclencheur.

<div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Bouton dropdown
    </button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Salade</a>
        <a href="#" class="dropdown-item">Tomates</a>
        <a href="#" class="dropdown-item">Oignons</a>
    </div>
</div>