Navbar
This page demonstrates the navbar. You can interact with the navbar to see how it works and change its configuration via the selection pills. The result is shown in the following section. The corresponding HTML code will automatically adapted according to your selection. You can even diretly manupulate the content of the Navbar by changing the html code (not that this does only work for html changes and not for changes where javascript would be involded).
Key features:
hr elements can be used to add horizontal seperation lines and spacing.hr class="nav-spacer" elements can be easily adjusetd in their widht, by adding astyle attribute. or the b.css natie
Tis actually akes the need for multi navs obsolete.
Sidebar
Show Sidebar
Next the sidebar is demonstrated. The sidebar uses the same functionality as the navbar, so you can basically use the same html code from the navbar.
Core differences:
-
The
nav element needs the classsidebar . That is the only manadtory difference. -
The sidebar's parent element should always have the class
nav-fixed and a defiend maximum width (e.g. 15rem). A not fiexed sidebar makes almost no sense. - There are no button elements in the sidebar.
- THe sidebar currently only supports two hierarchy levels (as the navbar).