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)
- 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.