Handling State

Certain options allow you to control which "state" they get applied to, by choosing a new value from a dropdown located at the upper-right:

The available states are listed below.

Default

Activates as soon as the page is loaded.

Focus

Activates when the component is given focus. This occurs when the component is clicked on, or tabbed into via the keyboard.

Hover

Activates when the mouse cursor is above the component

Selected

Activates when the component is "selected". For example, a tab button in the Tabbed Nav is considered selected after being clicked on.

Expanded

Activates when a component is "expanded". For example, a Nav Dropdown item would be considered expanded when its dropdown content is being displayed.