NavbarMenu
The component creates a complete responsive navigation menu based on "Bootstrap" which follows the menu items configured within the app the user is browsing.
The Navbar also contains the portal/app logo as per portal configurations.
<aspx:navbarMenu runat='server' cssClass="navbar-custom" />
Properties
| Property | Description |
|---|
| cssClass | Custom CSS class assigned to the "nav" tag. |
| hoverEffect | Defines the effect that should be shown when a user hovers their mouse over a menu item. Two possible options: textHighlight or backgroundHighlight.
The default is: textHighlight. |
| showLogo | Default: true. Optionally, you can set it to "false" and supply the logo separately. |
logoHref | By default, the logo will link the user to their app's landing page. However, if you wish to link the logo to your public website, you can set this property. |
| openInNewWindow | If the logoHref is set to an external URL, it is recommended that you set the flag to "true" so that the user don't accidentally leave the portal. |
| menuAlignment | Default: "right", Aligns the menu items to the right or left of the screen. |
| menuHeight | default:50, if the logo is square or needs to be displayed larger, increase the menu height. |
| wrapOverflow | Type: boolean (true/false) - default: true,
Automatically wraps the navigation items that overflow out of the screen under a dropdown menu. |
Branding the NavbarMenu
In order to brand the menu, you need to set various CSS variables with proper colors. Below provides a list of such CSS variables:
.mag-navbarmenu {
--mag-nav-bg-color: #fff;
--mag-nav-text-color: #222;
--mag-nav-text-hover-color: #000;
--mag-nav-hover-bg-color: #00000032;
--mag-nav-active-bg-color: #00000016;
}