Barre Latérale (Sidebar)

Voici un layout contenant une barre de navigation et une barre latérale.

Diviser la page entre la navbar et la div container :

<body>
 
    <nav class="navbar ...">
    </nav>
 
    <div class="container-fluid">
    </div>
 
</body>

Le conteneur sera constitué d'une ligne et de deux colonnes :

    <div class="container-fluid">
        <div class="row">
 
            <nav class="col-3">
            </nav>
 
            <main class="col-9" role="main">
            </main>
 
        </div>
    </div>

Ajout de CSS afin de fixer la sidebar sur toute la hauteur, même si la partie principale peut scroller :

    <div class="container-fluid">
        <div class="row">
 
            <nav class="col-3 bg-light sidebar">
            </nav>
 
            <main class="col-9 ml-auto" role="main">
            </main>
 
        </div>
    </div>

.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 48px 10px 0 10px;
	border-right: 1px solid gainsboro;
}
 
main {
	padding-top: 50px;
}

Ensuite, remplir la sidebar avec des liens :

            <nav class="col-3 bg-light sidebar">
 
                <h6>Section 1</h6>
 
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link active">Option 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 3</a>
                    </li>
                </ul>
 
                <h6>Section 2</h6>
 
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 4</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"       >Option 5</a>
                    </li>
                </ul>
            </nav>

Cramnurbel

Panneau latéral

Plan du Site:

Barre Latérale (Sidebar)

Cramnurbel

Outils pour utilisateurs

Outils du site

Panneau latéral

Plan du Site:

Barre Latérale (Sidebar)

Outils de la page