VCL navigation
Horizontally and vertically aligned multilevel navigation.
Features
Allows to build a hierarchical navigation by supporting three levels in total, which can be styled separately.
The vclNavigationHeading
can be used to create a header grouping
a subset of the navigation items.
Usage
The anchor tags used as content of the items are optional and should be considered for SEO reasons.
Horizontal.
Vertical.
Vertical with nested navigation.
Classes
vclNavigation
vclNavigationHeading
vclNavigationItem
vclNavigationItemLabel
Modifiers
vclNavigationItem
For vclDisabled
Variables
--navigation-bg-color
--navigation-color
--navigation-heading-color
--navigation-heading-bg-color
--navigation-3rd-level-bg-color
--navigation-2nd-level-bg-color
--navigation-item-disabled-bg-color
--navigation-item-disabled-color
--navigation-item-1st-level-bg-color
--navigation-item-1st-level-color
--navigation-item-1st-level-hover-bg-color
--navigation-item-1st-level-hover-color
--navigation-item-1st-level-selected-bg-color
--navigation-item-1st-level-selected-color
--navigation-item-2nd-level-bg-color
--navigation-item-2nd-level-color
--navigation-item-2nd-level-hover-bg-color
--navigation-item-2nd-level-hover-color
--navigation-item-2nd-level-selected-bg-color
--navigation-item-2nd-level-selected-color
Demo
example.html on GH-pages.