Skip to main content Skip to navigation Skip to search

Navigation

Angular Navigation Components and Directives

Selector & Basic Usage

To create responsive application navigation, these three entities need to be composed together:

  • clr-main-container
  • clr-header
  • clr-nav-level

There is only one @Input which is clr-nav-level directive itself. When the app is in responsive mode, level one appears on the left side and level two appears on the right side. Note: there are multiple possibilities for designating primary and secondary navigation elements. The example below is for illustrating two places that primary navigation might live and one place for secondary navigation.

CSS

Navigation classes apply to container elements that can be composed together to offer a standard Clarity layout.

Classes

CSS Class Host Element(s) Type Description Required
.main-container div layout Designate the root level application container. Automatically applied when using the clr-main-container directive. yes
.content-container div layout Designate a container for content and side navigation yes
.content-area main layout Designate a container for page level content. yes