Menu plugin
Frontfire UI provides a menu layout that can serve as website navigation or for web apps.
A menu consists of a menu bar that contains menu items. The menu bar can be arranged horizontally or vertically. Each menu item can be clicked and either invoke an action like navigating to a page, or open a submenu. Currently only a single level of submenus is supported. Menu items in a submenu can be separated by separator lines.
This plugin is available in the Minimal and Complete bundles.
This plugin depends on the plugins: dropdown
Simple horizontal menu
A menu is defined with an <ul> element and the menu CSS class.
Each menu item is defined with a <li> element.
The menu colours can be customised with the CSS variables that start with “--menu-” and “--submenu-”.
Active menu item
An item can be highlighted by adding the active CSS class to it.
This can be used to indicate the current page in a website navigation menu.
Right-aligned menu
The entire menu can also be aligned to the right end by adding the right CSS class to the menu element.
Left- and right-aligned items
When adding the both CSS class to the menu element, you can align some items to the left and others to the right end.
The space in between is declared with a pseudo menu item with the stretch class.
Non-link items
Menu items can also be non-interactive and only show static text.
Add the text CSS class to such menu items.
This example shows a text on the left side, as placeholder for an image or other content, while all interactive menu items are at the right end.
Dropdown submenus
Menus can also have submenus.
(For now, only one submenu level is supported.)
They open as a dropdown when the menu item is clicked.
Items with a submenu can have an indicator, either with the submenu-arrow or submenu-dots CSS class added to the menu element.
Menu items can be disabled by adding the disabled HTML attribute (not a CSS class) to the <a> child element.
Separator items are added as simple menu items with no CSS class and a single dash (-) as content.
If the menu should not start a page navigation, its <a href> attribute can be set to #.
That will be replaced with a true no-op with minimal status bar cluttering while hovering the link.
Clicked items on a submenu will close the submenu, unless the link element has the stay-open CSS class.
Vertical menu
A vertical menu can be created by adding the vertical CSS class to the menu element.
The width must be restricted if there is no bounding container, otherwise the vertical menu will span the entire available paragraph width.