NavItem

This is a default control for navigation-related components, can contain any other controls as nested items.

NavItem

Adding NavItem

A navItem can be easily added to a ribbon with the help of the add() method of Tree Collection:

ribbon.data.add({
    type:"navItem", value:"My NavItem"
});

type	(string) the type of a control, set it to "navItem"
id	(string) the id of a control, auto-generated if not set
parent	(string) the parent of the item
value	(string) a value of the navItem. You need to set either the value or html property to the navItem
html	(string) optional, a string with HTML that should be inserted into the navItem
css	(string\|string[]) adds style classes to a navItem
icon	(string) an icon of the navItem
items	(array) an array of nested controls. You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
twoState	(boolean) adds two states to the item: active (pressed) and inactive (unpressed)
active	(boolean) sets the state of a twoState item
group	(string) defines the name of a group of controls a navItem belongs to. If one of the navItems in the group becomes active, all others automatically become inactive
hotkey	(string) the name of the hot key for the item
tooltip	(string) a tooltip for the navItem
size	(string) defines the size of a navItem: "small"\|"medium"\|"auto"
count	(number) a badge with a number
countColor	(string) the color of a badge with number: "danger" \| "secondary" \| "primary" \| "success"
hidden	(boolean) defines whether a control is hidden
disabled	(boolean) defines whether an item is disabled

A navItem can have an icon which is set through the corresponding option icon:

{
    type:"navItem", value:"Some",
    icon:"dxi dxi-check"
}

You can add a number badge to the navItem to display information like the number of new messages. The badge is set via the count property:

{
    type:"navItem", value:"Some",
    icon:"dxi dxi-check",
    count:10
}

You can add a custom HTML content to a navItem with the help of the html property:

{
    type: "navItem",
    html: "<div id='preloader'><div id='loader'></div></div >",
}

To hide/show a navItem, you should pass the ID of the navItem to the hide() / show() Ribbon methods:

ribbon.show(id);
ribbon.hide(id);

Any navItem in the ribbon can be enabled/disabled:

ribbon.enable(id);
ribbon.disable(id);

You can add a tooltip to a navItem:

{
    type:"navItem", 
    value:"Click", 
    tooltip:"Click me and find out why"  }