Skip to main content

Navbar

The Navbar, or navigation bar, is a global navigation component. It contains important functionalities for navigating products, facilitating access to essential functionalities for carrying out tasks, maintaining consistency across all products and reducing cognitive effort. The menus and sub-menus can be customized, depending on the needs of each product.

Anatomy​

  1. Product Identification: Displays the current product's name and contains a link to the homepage of its domain.
  2. Main Menu: contains links to the main features of the current product.
  3. Auxiliary Menu: contains links to access important sections related to the current product operation.
  4. Account Menu: displays information about the account and personal profile active in the current product.

Product identification​

It is the first element to be displayed and is located on the left of the Navbar. Displays the logo to help identify which product the person is accessing and, when clicked, sends the person to the main page of each product.

If the logo is the only element on the Navbar, you can leave it center-aligned, without the functionality that sends the person to the product's main page with a click. See in this example how to build this solution.

Allows navigation and access to the main functionalities of each product and may contain sub-menus with only one navigation level. All items that have sub-menus display an indicative arrow, making it clear which menus have more options and which ones do not.

These are elements that, when clicked, send the person directly to a page or functionality of the product.

Item​

These are elements that, when clicked, display a sub-menu with the pages or functionalities that are part of the grouping within each product. The elements displayed within the sub-menu are elements that, when clicked, send the person directly to a product page or feature.

Using Tags in sub-menu​

Sub-menus can contain specific indicative Tags for new sections of a product, sections that can only be accessed with plan upsell or sections that are still being tested. Tags inserted in navbar sub-menus must follow specific display rules:

Table with forms of displaying the tag in the sub-menu
TagTextUseDisplays
NEW
NEWNew product functionality or features.
  • Start date and end date of exhibition
  • It should disappear after clicking on the respective menu item (after the visit, the item ceases to be new)
ENTERPRISE
LIGHT, BASIC, PRO, ENTERPRISE/ADVANCEDFeatures available on other subscription plans.
  • Permanent display
  • It should disappear or change as there are changes in the hired plan
BETA
BETAFeatures that are still being tested.
  • Start date and end date of exhibition
  • It should disappear when the testing phase is done

Auxiliary menu​

Provides shortcuts to specific features and pages for each of the products and it must be displayed to the left of the account menu. In the auxiliary menu, only the use of icons is allowed, texts should not be used.

It is possible to make the icon, when clicked, display a sub-menu as well as the behavior and usage rules described in the item on the main menu.

Account menu​

It is used to help identify with which user and which account the person is accessing the product, it displays an avatar with a photo, the person's name and the account name. If there is no registered photo, the avatar will display the first letter of the first name and the first letter of the last name.

When clicking on this element, a sub-menu with functionalities items directly related to the account is displayed.

Editors​

For edition​

This minimalist navigation offers few options, always with full focus on the task of editing assets. Displays the product logo, feature name and the name of the asset that's being edited. On the right corner, it displays the name of the currently active account and a link to exit edit mode.

For preview​

The preview navigation bar is similar to the edition bar. It presents the product logo, feature name, the name of the asset that's being previewed, a toggle for Desktop/Mobile preview and "Close Preview" button.

Texts​

When writing for main menu and account items, use capital letters at the beginning of each term. For example: Channel Analysis and Account Details. Prepositions and conjunctions do not come under this rule.

Everything in the account menu is for the user, so always use My Accounts, My Profile, etc.

Applications​

The use of tags in the Navbar submenus must follow the usage rules described in the submenu section.

Avoid using any other component in the Navbar besides the ones presented so far.

Feedback​