Navbar

Component Reference

Component Reference: Nav, Navbar, Navitem, Navseparator

DOM Structure

<div class="z-navbar z-navbar-orient">
    <ul>
        <!-- Navitem -->
        <li class="z-navitem">
            <a class="z-navitem-content">
                <img class="z-navitem-image" />
                <i class="z-icon-font"></i>
                <span class="z-navitem-text"></span>
            </a>
        </li>
        <!-- Navseparator-->
        <li class="z-navseparator"></li>
        <!-- Nav-->
        <li class="z-nav">
            <a class="z-nav-content">
                <img class="z-nav-image" />
                <i class="z-icon-font"></i>
                <span class="z-nav-text"></span>
            </a>
            <ul><!-- second/third level --> </ul>
        </li>
    </ul>
</div>

• Line 1: z-navbar-orient represents Navbar orient (z-navbar-horizontal or z-navbar-vertical)
• Line 7,15: Can be any Icon Font from Font Awesome.

LESS Source

Basically, LESS source is correspondent to its DOM structure, and each orient have different styles.

/* navbar */
.z-navbar {
    /* overall style */
    > ul { /* first level */
        ul { /* second level */
            ul { /* third level */
            }
        }
    }
    /* horizontal style */
    &-horizontal {
    }
    /* vertical style */
    &-vertical {
    }
}
/* nav, navitem */
.z-nav,
.z-navitem {
    &-content {}
    &-image {}
    &-text {}
}
/* navseparator */
.z-navseparator {
}

LESS Variables

The following LESS variables are used for Navbar, Nav, Navitem and Navseparator components. Check other variables from Github.

Variables	Default Value
@navImageSize	16px
@navColor	#333333
@navBorderColor	#F4F4F3
@navBackgroundColor	#FFFFFF (first level, each level is 3% darker)
@navHoverBackgroundColor	#E8E8E8
@navSelectedColor	#FFFFFF
@navSelectedBackgroundColor	#372F2B
@navSeparatorColor	#838383
@navCollapsedWidth	32px

Customize Sample

Check the instruction for customization step, and if we change the LESS variables in nav.less as follows:

@import "~./zul/less/_header.less";

@navColor: #333333;
@navBorderColor: #006400;
@navBackgroundColor: #9ACD32;
@navHoverBackgroundColor: #32CD32;
@navSelectedColor: #FFFFFF;
@navSelectedBackgroundColor: #556B2F;
@navSeparatorColor: #006400;

/* Each level is 3% darker by default, modify it to 5% */
.navLevel(@level) {
	/* omitted */
	.z-nav-content,
	.z-navitem-content,
	.z-navseparator {
		background: darken(@navBackgroundColor, (@level - 1) * 5);
	}
}

.z-navbar {
    /* omitted */
}

The look and feel of Navbar, Nav, Navitem and Navseparator components will look like the image below:

Version History

Version	Date	Content