Free The Webal navbar is in the Free package and in Pro. Pro Navbar profiles and mega menus are in Pro only.
The Webal navbar is the main menu of your site header. On wide screens it shows your menu as a bar with dropdowns, and on phones and small screens it turns into a menu button that opens a panel. You do not need a special module for it, because it is simply a new way to show Joomla's own Menu module.
How the parts fit together
Beginners often ask where the navbar lives. It is made of a few simple parts, and each part is a normal Joomla feature that you either know already or can learn in a minute.
- Menu items. A menu item is one link in your menu, such as Home or Contact, and you make menu items under Menus.
- The Menu module. A module is a block that Joomla puts in a place on your page. The Joomla Menu module shows one of your menus, and it is the module that carries the navbar.
- The layout. A layout is a way of showing a module. In the Menu module you choose the layout Webal navbar, and that one choice turns the plain menu into the Webal navbar.
- The Navbar profile (Pro). A Navbar profile holds the settings for how the bar looks and acts, such as where the logo sits, how high the bar is, whether it stays in view, and much more. You link the profile to your Menu module.
- Mega menus (Pro). A mega menu is a wide panel of columns that opens under one menu item.
| Part | What it does | Where you make it | Package |
|---|---|---|---|
| Menu items | The pages in your menu | Menus, then your menu | Joomla |
| Menu module with the layout Webal navbar | Shows the menu as a navbar | Content, Site Modules | Free and Pro |
| Navbar profile | Sets the look and the way it acts | Components, Webal Blocks, Menu profiles | Pro |
| Mega menu | A wide panel under one menu item | Components, Webal Blocks, Mega menus | Pro |
Build your first navbar
Before you start, install the Webal menu layouts into your template. Open Components, Webal Blocks, Dashboard and press Install all on the row of your template, and the page Installing the menu layouts into templates shows how. Without the layout file, the choice Webal navbar is not in the list.
Step 1: make the menu items
- Open Menus, then the menu you want, for example Main Menu.
- Press New.
- Type a Title, which is the word that visitors see in the bar.
- Press Select next to Menu Item Type and choose what the item opens, for example a single article.
- For a dropdown, choose a Parent Item, and the new item then sits inside the dropdown of that parent.
- Press Save & Close, and then repeat these steps for every page.
Step 2: make the Menu module
- Open Content, then Site Modules. Press New and choose Menu from the list.
- Type a Title, for example Main menu, and give every menu on a page its own title. The title is the name that screen readers (programs that read the page aloud) say for the menu.
- On the Module tab, choose your menu in Select Menu. Set Sub-menu Items to Show, so that the dropdowns can open.
- Open the Advanced tab. In the Layout list, choose Webal navbar. On Cassiopeia itself the list shows the file name
wbl-navbarinstead, but a child theme made by the installer shows the readable name. - Go back to the Module tab. In the right-hand column, open the Position list and choose menu, where a position is a named place in your template where a module can go.
- Under Title in the same column, choose Hide, because the title is still the name that screen readers say for the menu.
- Press Save.
- Open the Menu Assignment tab and choose On all pages, so that the menu shows everywhere.
- Press Save & Close, and then open your site to see that the bar is there.
Step 3 (Pro): link a Navbar profile
- Open Components, Webal Blocks, Menu profiles.
- Open the New list and choose Navbar profile.
- Type a Title, for example Main navbar.
- On the General tab, tick your Menu module in Menu modules. Each entry shows the module title, its number, its position and its layout, so that you can tell two modules apart.
- Press Save, and then look at your site. If you change a setting, save it and reload the page to compare.
A Menu module can use one profile only. The next page, Navbar profiles, goes through every tab.
What you get with no profile
A navbar with no profile still works well, and it uses these starting choices:
- The brand is the logo or site title that your template shows.
- The menu sits at the start of the bar, next to the brand, which in English is the left.
- The bar is standard height, and it stays in view as the page scrolls.
- Sub-menus open when the pointer rests on them, or when they are clicked.
- The current page is underlined.
- Below 992 pixels wide, a menu button replaces the menu and opens a panel that slides in from the end side.
A module with no profile never breaks, and this also holds when a profile is unpublished or in the trash.
What else the Menu module still does
Everything that Joomla's Menu module does still works, because the items come from Joomla's own menu code. This covers published dates, access levels, the language filter, Start Level, End Level and Base Item, and a heading or separator is shown as text instead of as a link.
A menu can be six levels deep and show 1,500 items at most, and anything beyond that is left out. If you reach the limit, split the menu into several Menu modules.
Tip. The navbar prints one brand, and while it does, Cassiopeia's own brand is hidden, so you never see two. To keep the template's brand instead, choose No brand in the bar in the Brand source of the profile.
Accessibility. Give each menu on a page its own title or its own name for screen readers, and read the page Navigation accessibility to find out more.
For your web host or developer. The navbar prints its menu twice, once for wide screens and once inside the mobile panel, but only one copy shows at any width. Joomla's default cache mode for the Menu module, by menu item, is the right one. Do not set the cache mode to Static, because it would show the first page's highlighted item on every page.