Skip to main content Skip to navigation Skip to search


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.


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