Navbar

A navigation bar, navbar, is an horizontal bar that provides several access points to different parts of a system.

Usage

Navbars in DE are used inside applications to provide navigation among their different pieces.

A navbar can contain one or several entry points in the form of tabs at the leftmost side and search field at the rightmost side. In case there are many options to navigate, you can make use of a dropdown to host some of the navigating options.

The search textfield activity must work only over the active option in the navigation bar.

When the viewport resizes to smaller screen sizes the navbar entries collapse intro a dropdown where the active screen gets populated and selected in the dropdown.

Examples

Example 1: Navbar with search bar

Example 2: Navbar with search bar and focus state on search textfield

Example 3: Navbar with navigation options in dropdown and search. The second image corresponds to its responsive view. For more information about search, please visit collapsible search

Attributes