Skip to main content

Navbar

The Navbar works like a template component, that is, in addition to offering styles and behaviors for the component, it also styles, positions and coordinates passed components, through the children property.

There should be only 1 Navbar component on the page, located at the top.

Product identification​

The product logo, or the RD Station logo itself, must be the first element of the Navbar. It must be included via the Brand component.

Center aligned​

If the logo is the only element in the Navbar you can leave it centered.

Use the Navbar.Section subcomponent with the attribute fluid along with the Navbar.Item subcomponent to create the main navigation. If the menu item has sub-items, combine Navbar.Item with Dropdown. If the item is a link, just include the href attribute.

You can also wrap the Dropdown.Item subcomponent with the Badge or internally add the Tag component, as shown in the example below.

Use the active property to indicate that the Navbar.Item subcomponent is active.

If you need to use the reference of Dropdown in another component, use Dropdown.Anchor to wrap the component that will receive the reference (probably a Navbar.Item or Navbar.AccountItem subcomponent), so that it renders with the proper style.

Auxiliary menu​

In the auxiliary menu, we can insert icons with or without Dropdown and Badge. See the example:

tip

To give the user more context, wrap a Tooltip around the Navbar.Item subcomponent when its content is an icon.

Account menu​

The Navbar.AccountProvider subcomponent is responsible for receiving the user's account information, such as username, account name and avatar, if any, and for passing them to the subcomponents that will render them (Navbar. AccountInfo and Navbar.AccountItem).

The Navbar.AccountItem should be used as the Dropdown anchor.

Navbar.AccountInfo will only be displayed on screens smaller than 1280px (--breakpoint-lg) and will contain a summary of account data. This subcomponent must be inserted as the first element of Dropdown, before Dropdown.Container.

danger

The subcomponent for creating the account menu must not be wrapped by Navbar.Section and must always be the last component added to Navbar.

Sections​

As shown in the examples above, the content of the Navbar, except for the logo and the account menu, must be inserted through a sequence of sections, using the component Navbar.Section.

Fluid section​

danger

There must be only one Navbar.Section with the fluid property inside the Navbar.

You can indicate via the fluid property that one of the sections of the Navbar is fluid, that is, that it will occupy all available space:

Section without border​

Use the unbordered attribute to remove the left border of the Navbar.Section subcomponent for default application to products. In the case of the Navbar used in editors, the left border should be kept.

The Link and Text components, when deriving from a Navbar.Section, must follow some rules:

  • The Link component must always come with the removeUnderline property
  • Use the truncate property whenever there is a possibility that the Link or Text content will increase, to the point of breaking the Navbar layout
  • If you need to emphasize text, don't change the default Text element to h1, h2, etc. Use the token property with the value Text.tokens.TEXT_SM_BOLD

Sizes​

Small​

Medium (default)​

Composition with other layout components​

The styles of Navbar automatically interact with the styles of StickyBarGroup, Sidebar and Main to compose a layout pattern for pages. Since version 8.14.0 this behavior also works when these components are separated into different micro frontends.

info

Uses the disabledAutoPositioning property to disable automatic positioning of the component.

This property can be useful in scenarios where the page layout will be organized by an external library or some custom style.

Feedback​