nav css

No Javascript needed

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 a style attribute.

w-*

HTML of THIS navbar

CSS of THIS navbar

Javascript of this navbar (if no javascript is needed, nothing is dsiplayed here)

Sidebar

Show Sidebar

Next the sidebar is demonstrated. The sidebar uses the same functionality as the navbar (same css and js code), so you can basically use the same html code from the navbar. Core differences:

The nav element must have the class sidebar.
The sidebar's parent element should always have the class nav-fixed and a defiend maximum width (e.g. 15rem). A not fixed sidebar makes no sense in most use cases.
There are no button elements in the sidebar.
The nav element should have the class nav-style-arrow-* or nav-style-arrow-W to style the arrow for hidden items.
The sidebar supports up to four levels of indentation.
To add a collapse button to the sidebar, it is recommended to start the first two items of the sidebar with
- <a onclick="clsNav.ToogleSidebar(event)">☰ </a> and
- <hr class="nav-spacer">
This will add a collapse button to the sidebar on top, which will call the clsNav.ToogleSidebar function.

HTML of THIS sidebar

Dynamic Sidebar

Next a sidebar with dynamic content is shown. It is based on the sidebar above, but the content is generated by the clsNav.InitDynamicSidebar function.

Fill Sidebar