Skip to main content

Sidebar 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,
tooltip?: string,
twoState?: boolean,

css?: string | string[],
disabled?: boolean,
hidden?: boolean,
},
// more Sidebar 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 a keyboard shortcut for a menu item
html(optional) a string with HTML that should be inserted into the navItem
icon(optional) an icon of the navItem
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 an item is hidden

Example

Related article: NavItem