This is a default control for navigation-related components, can contain any other controls as nested items.
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"
});
Related sample: Ribbon. Nav Items
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 >",
}
Related sample: Ribbon. Item HTML Content
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" }
Back to top