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

Date Publishing Settings

Set the Start Publishing and Finish Publishing dates. This will cause the ui/Theme-Builder component to only be published for the specified time period. If you use both the Start Publishing and the Finish Publishing, the ui/Theme-Builder component will show up only between the beginning date and the ending date.

Start Publishing

If you only set the Start Publishing and not the Finish Publishing, Joomla! will begin displaying the ui/Theme-Builder component on the beginning publishing date given but it will never stop showing the component.

Finish Publishing

If you only set the Finish Publishing and not the Start Publishing, Joomla! will show the ui/Theme-Builder component as soon as you have turned it on and will stop showing the component once the ending publishing date has been reached.

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, Nav)
This setting applies to all dropdowns in the menu. If you want to specify custom columns for your menu item navigate to joomla menu settings -> select menu item -> link type setting -> Link Title Attribute {col x} (x = number of columns). Possible values 1-5. (Settings)

Set columns width in px

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

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)

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.