Skip to main content

Ribbon NavItem properties


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,
size?: "small" | "medium" | "auto",
tooltip?: string,
twoState?: boolean,

css?: string | string[],
disabled?: boolean,
hidden?: boolean,


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
size(optional) defines the size of a navItem: "small"|"medium"|"auto"
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


Related article: NavItem