Create a Fixed Sidebar using HTML and CSS

A fixed sidebar (side navigation bar) is a common layout pattern where the sidebar remains fixed on the screen while the rest of the content scrolls. This article will create a fixed sidebar using HTML and CSS.

HTML creates the structure layout, and CSS applies styles to the elements. First, we create a container div element that contains two div's i.e. one is sidebar and another one is content. In the sidebar div, we put the fixed sidebar, and in the content div, we add the content that we want to display in the content area.

Example 1: Here, we create a fixed sidebar navigation menu of full height.

Output:

Example 2: Here, we create a fixed side navigation bar of auto height, i.e. the height of side navbar menu is based on menu items.

Output: