Show a navigation bar that can be used for your site navigation. Use this component to position a navigation bar independently of the template.

Basics Settings

Label

Define a name to easily identify this element inside the Theme-Builder.

Choose a Menu

Choose a Joomla menu from the list below.

Choose a Base Link

Choose a Base Link from the list below.

Class

Define one or more class names for the element. Separate multiple classes with spaces.

ID

ID Selector for the element.

Style Settings

Addon Padding

Choose a padding for the component.

Menu Layout

Choose a layout. (Layouts: Navbar, Nav, Subnav)

Boundary alignment

Yes or No. You can also align the drop to its boundary. (Layout: Navbar)

Set Boundary alignment

Set the position of the drop. (Layout: Navbar)

Multiple columns

The Dropdown component allows you arrange the dropdown content in columns. (Layout: Navbar)

Set columns width in px

Use this setting to prevent line breaks in the columns. (Layout: Navbar)

Nav modifier

Choose a style modifier for the nav. (Layout: Nav)

Use Dropbar?

Yes or No. A dropbar extends to the full width of the navbar and displays the dropdown without its default styling. (Layout: Navbar)

Dropbar Push?

By default, the dropbar overlays the site content. Choose Yes, to push the content down instead. (Layout: Navbar)

Use Offcanvas?

Create an off-canvas sidebar that slides in and out of the page, which is perfect for creating mobile navigations. (Layout: Navbar, Nav)

Flip Offcanvas?

Choose Yes to adjust the off-canvas its alignment, so that it slides in from the right.

Offcanvas Overlay?

Display the off-canvas together with an overlay.

Offcanvas Animation modes

By default, the off-canvas slides in. But you can actually choose between different animation modes for the off-canvas entrance.

Animation Settings

Scrollspy Animation

The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.