Primer CSS Layout Sidebar Positioning

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.

In this article, we'll see about Layout Sidebar positioning. We can change the position of the sidebar either to the start/left or end/right. 

Primer CSS Layout Sidebar positioning Classes:

• Layout--sidebarPosition-start: This class is used to set the sidebar position to the start or at the left. This is the default positioning of the sidebar.
• Layout--sidebarPosition-end: This class is used to set the sidebar position to the end or at the right.

Syntax:

<div class="Layout Layout--sidebarPosition-start">
 <div class="Layout-main border">...</div>
 <div class="Layout-sidebar border">...</div>
</div>

Example 1: Below example demonstrates the layout sidebar with the start position.

Output:

👁 Image

Example 2: Below example demonstrates the layout sidebar with end position.

Output:

👁 Image

Reference: https://primer.style/#sidebar-positioning