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.

horizontal example

Vertical.

vertical example

Vertical with nested navigation.

vertical-nested example

Classes

• vclNavigation
• vclNavigationHeading
• vclNavigationItem
• vclNavigationItemLabel

Modifiers

For vclNavigation

• vclVertical

For vclNavigationItem

• 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.