Side Navigation Menu
Side navigation is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, images or even forms.
Its clarity and simplicity remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorization, which is almost essential within bigger projects.
Side navigation uses accordion list component's structure and properties. But also, it incorporates the bootstrap list group component's styles.
Like many other components, a Side navigation can be styled with a number of extension classes. Append one of the following classes to the .list-group
element: .section-default
, .section-understated
, .section-primary
, .section-standout
, .section-inverted
, .section-impact
, .section-danger
.
Side navigation:
Source Code:
Side navigation (standout):
Source Code:
Standout link with sub-nav 1
Standout link with sub-nav 2
Regular standout link
Standout link with sub-nav 3
Standout link 2
Side navigation (primary):
Source Code:
Primary link with sub-nav 1
Primary link with sub-nav 2
Regular Primary link
Primary link with sub-nav 3
Primary link 2
Side navigation (understated):
Source Code:
Understated link with sub-nav 1
Understated link with sub-nav 2
Regular Understated link
Understated link with sub-nav 3
Understated link 2