Components
Side Navigation
Example
With icon
Sub menu
Sub menu
Sub menu
HTML
React
Web Component
Copy <nav class= "sidenav sgds list-unstyled open1" >
<li class= "sidenav-item" >
<button class= "sgds btn collapsed active" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleA"
aria-expanded= "false" aria-controls= "collapseExampleA" >
<i class= "bi bi-layers" ></i> Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse show" id= "collapseExampleA" data-bs-parent= ".open1" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link active" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
<li class= "sidenav-item" >
<button class= "sgds btn collapsed" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleB"
aria-expanded= "false" aria-controls= "collapseExampleB" >
<i class= "bi bi-layers" ></i> Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse" id= "collapseExampleB" data-bs-parent= ".open1" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
<li class= "sidenav-item" >
<button class= "sgds btn collapsed" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleC"
aria-expanded= "false" aria-controls= "collapseExampleC" >
<i class= "bi bi-layers" ></i> Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse" id= "collapseExampleC" data-bs-parent= ".open1" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
</nav>
[**DEV**]View on React storybook
View on Web component storybook
With no icon
Sub menu
Sub menu
Sub menu
HTML
React
Web Component
Copy <nav class= "sidenav sgds list-unstyled open2" >
<li class= "sidenav-item" >
<button class= "sgds btn collapsed active" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleD"
aria-expanded= "false" aria-controls= "collapseExampleD" >
Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse show" id= "collapseExampleD" data-bs-parent= ".open2" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link active" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
<li class= "sidenav-item" >
<button class= "sgds btn collapsed" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleE"
aria-expanded= "false" aria-controls= "collapseExampleE" >
Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse" id= "collapseExampleE" data-bs-parent= ".open2" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
<li class= "sidenav-item" >
<button class= "sgds btn collapsed" type= "button" data-bs-toggle= "collapse" data-bs-target= "#collapseExampleF"
aria-expanded= "false" aria-controls= "collapseExampleF" >
Sub menu
<i class= "bi bi-chevron-down" ></i>
</button>
<div class= "collapse" id= "collapseExampleF" data-bs-parent= ".open2" >
<ul class= "list-unstyled" >
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
<li><a href= "#" class= "nav-link" > Sub menu item</a></li>
</ul>
</div>
</li>
</nav>
[**DEV**]View on React storybook
View on Web component storybook
Anatomy
Indicator: Used when it is active, this allows the user to know what page/item they are on.
Sub menu label (expanded): Serve to tell the user what the page is about.
Icon (situational): Used when there are sub menu items to indicate that sub menu can be expanded or collapsed.
Sub menu item label: Serve to tell the user what the item is about.
Spacing
Within the sub menu item
Ensure that there is a min 32px horizontal spacing between dropdown item.
Within & outside the sub menu
Ensure that there is a min of 16px spacing between label and icon/indicator.
Usage guidelines
Side navigation should be used when
There are many sub pages under the selected section in the main menu. The side navigation will make it easy to scale and add on more options.
Side navigation should not be used when.
There are not many navigation options in the selected section.
Usability guidelines
Highlight the current section
Show users where they are by highlighting it in the side navigation so they know which section they are currently in.
Use straightforward labels
Labels should be clear to your users. You should avoid jargon or unfamiliar terms that users cannot understand.
Side navigation design tokens $sidenav-color : $primary ! default ;
$sidenav-fontsize : 1rem ! default ;
$sidenav-width : auto ! default ;
$sidenav-item-spacing : 1rem ! default ;
$sidenav-btn-border-width : $navbar-border-bottom-height ! default ;
$sidenav-btn-padding-x : 0 .5rem ;
$sidenav-btn-padding-y : 0 .5rem ;