Skip to main content

Toolbar NavItem properties

Usage

const data = [
{
type?: "navItem",
id?: string | number,
parent?: string,
value?: string,
items?: IMenuElement[], // ISpacer | ISeparator | INavItem | IMenuItem | ICustomHTML

active?: boolean,
count?: number,
countColor?: "danger" | "secondary" | "primary" | "success",
group?: string,
hotkey?: string,
html?: string,
icon?: string,
multiClick?: boolean,
tooltip?: string,
twoState?: boolean,

css?: string | string[],
disabled?: boolean,
hidden?: boolean,
},
// more Toolbar controls
]

Description

type(optional) the type of a control, set it to "navItem"
id(optional) the id of a control, auto-generated if not set
parent(optional) the parent of the item
value(optional) a value of the navItem. You need to set either the value or html property to the navItem
items(optional) 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.
active(optional) sets the state of a twoState item
count(optional) a badge with a number
countColor(optional) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
group(optional) 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(optional) the name of the hot key for the item
html(optional) a string with HTML that should be inserted into the navItem
icon(optional) an icon of the navItem
multiClick(optional) if true - the "click" event will fire multiple times when the item is clicked and held; if false - the "click" event will fire on each click of the item
tooltip(optional) a tooltip for the navItem
twoState(optional) adds two states to the item: active (pressed) and inactive (unpressed)
css(optional) adds style classes to a navItem
disabled(optional) defines whether an item is disabled
hidden(optional) defines whether a control is hidden

Example

Related article: NavItem