Sidebar and topbar

Navigation often occurs via a topbar and/or a sidebar. This is a simple example on how you can implement this using CSS. I will be using bootstrap as well as they make it relatively simple to create a top bar without adding too much CSS.

HTML layout

First, the HTML layout. It’s quite simple, we need to divide it into 3 parts: the topbar, the sidebar and the main content area.

<div>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<!-- TOPBAR CONTENT  -->
	</nav>

	<div class="page-container">
		<nav class="sidenav"></nav>
		<div id="main"></div>
	</div>
</div>

This is just the main content to get this layout working.

CSS body layout

CSS is the most important part to make this work.

First, we need to prepare the body layout.

html,
body {
	height: 100vh;
}

This will allow the body of our have a height of 100%, which is important for the sidebar.

CSS sidebar

Next up is the CSS for the sidebar, which should look something like this.

.sidenav {
	position: fixed;
	padding-top: var(--navbar-height);
	width: var(--sidebar-width);
	left: 0;
	height: 100vh;
}

The padding will drop down the amount of space necessary height so I won’t be behind the topbar.

As I will reuse some of these lengths, I have declared them in at the :root.

:root {
	--navbar-height: 56px;
	--sidebar-width: 12rem;
}

The navbar height, in this case, is the Bootstrap standard. The sidebar width I choose myself.

CSS main

The CSS for the main element should look something like this.

#main {
	padding-top: var(--navbar-height);
	height: 100vh;
}

Once again, we need to add padding to the top to allow the width of the navbar.