Default horizontal layout has a navigation dropdown arrow. To hide it use horizontal navigation without dropdown arrow option.
This table contains class which can be used in horizontal navigation to hide dropdown arrow.
| Classes | Description |
|---|---|
.navbar-without-dd-arrow |
To set horizontal navigation without dropdown arrow, you need to add .navbar-without-dd-arrow class in horizontal navigation <div> tag. Refer HTML markup line no 13. |
This section contains HTML Markup to create light vertical navigation. This markup define where to add css classes to make vertical navigation light.
.navbar-without-dd-arrow class to hide navigation dropdown arrow.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body data-open="click" data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">
<!-- fixed-top-->
<nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border">
...
</nav>
<!-- START Horizontal navigation -->
<div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-without-dd-arrow">
...
</div>
<!-- END Horizontal navigation-->
<!-- BEGIN Content-->
<div class="content app-content">
<div class="content-wrapper">
<!-- content header-->
<div class="content-header row">
...
</div>
<!-- content header-->
<!-- content body-->
<div class="content-body">
...
</div>
<!-- content body-->
</div>
</div>
<!-- END Content-->
<!-- START FOOTER DARK-->
<footer class="footer footer-dark">
...
</footer>
<!-- START FOOTER DARK-->
</body>
</html>
Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.
This table contains required PUG variables to generate horizontal navigation without dropdown arrow.
| Block | Variable | Datatype | Value | Description |
|---|---|---|---|---|
horizontalMenuConfig |
menuWithoutDDArrow |
boolean |
true |
horizontalMenuConfig block has a menuWithoutDDArrow variable, it contains horizontal navigation dropdown icon specific settings in that you need to set true. |
Use following PUG code to generate page or template having vertical light navigation.
menuWithoutDDArrow variable value as true in horizontalMenuConfig block, it contains horizontal navigation dropdown icon specific classes.content block has content section html file included include ../contents/horizontal-no-arrow-navigation.html, which can be customizable on page level.If you want to use this options on page level you need to define this configuration option on PUG page it self. This template has one example pug file for horizontal-navigation-submenu-click.pug, however you can use it on template level but it will generate template all pages with the same configuration option.
block pageVars
- var pageTitle = "No Dropdown Arrow"
- var pageSubTitle = "Horizontal navigation without dropdown arrow"
- var description = "The horizontal navigation without dropdown arrow customization option."
- var activeMenu = "horizontal-nav-no-dropdown"
extends template
append horizontalMenuConfig
- var menuWithoutDDArrow = true
append breadcrumbs
+breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Horizontal Navigation"}, {name:"Navigation Dark"}])
//- Include page content in page block
append content
include ../contents/horizontal-nav-no-dropdown.html
//- Vendor CSS
//------------------------------
//- Add Vendor specific CSS
append vendorcss
link(rel='stylesheet', type='text/css', href='../../../app-assets/vendors/css/ui/prism.min.css')
//- Page CSS
//------------------------------
//- Add custom page specific CSS
append pagecss
//- Vendor JS
//------------------------------
//- Add vendor specific JS
append vendorjs
script(type='text/javascript' ,src='../../../app-assets/vendors/js/ui/prism.min.js')
//- Page JS
//------------------------------
//- Add custom page specific JS
append pagejs