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:

Regular link Regular link 2

Source Code:


Regular link Regular link 2

Side navigation (standout):

Regular standout link Standout link 2

Source Code:


Regular standout link Standout link 2

Side navigation (primary):

Regular Primary link Primary link 2

Source Code:


Regular Primary link Primary link 2

Side navigation (understated):

Source Code:


More Navigation Samples