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)
- Navbar Logo
- Yes or No. Choose a Image or use a custom image code e.g a svg code. (Layout: Navbar)
- Split navigation bar?
- Yes or No. You can create a split menu with a centered logo. This option splits all level 1 menu items into 2 separate navbar, left and right. In the middle is the logo. (Layout: Navbar)
- Navbar Container
- Add the Navbar Container element to give it a max-width to the Navbar. (Layout: Navbar)
- Navbar Transparent?
- Yes or No. (Layout: Navbar)
- Show Parent Icon?
- Yes or No. (Layout: Navbar, Nav, Subnav)
- Show Tooltips?
- Yes or No. (Layout: Navbar, Nav, Subnav)
- Tooltip Position
- When tooltips are displayed, you can use this setting to change their position. (Layout: Navbar, Nav, Subnav)
- 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.
- Offcanvas Accordion?
- By default, child menu items are always visible. To apply an accordion effect, just choose 'yes'.
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.