focusgroup

This feature is not (yet) supported on your device

The focusgroup HTML attribute is a declarative way to add keyboard arrow-key navigation to widgets like toolbars, tablists, menus, listboxes, etc. without the need for JavaScript.

The attribute takes a behavior token and three optional modifier tokens: focusgroup="[behavior] [modifier1] [modifier2] [modifier3]"

The behavior token defines the widget pattern and can take the values:

• toolbar
• tablist
• radiogroup
• listbox
• menu
• menubar
• none

The first modifier defines the navigation direction and can take the values block (vertical) or inline (horizontal).

The second modifier defines the wrapping behavior and can take the values wrap (allow navigation to wrap around) or nowrap (prevent navigation from wrapping). When set to wrap, the navigation will wrap around to the next item in the group, so when the last item is reached, the focus will move to the first item in the group and vice versa. When set to nowrap, the navigation will stop at the last item and the focus will remain on the last item.

The third modifier defines if the last-focused item in a group should get focus again on re-entry with Tab. Use the nomemory modifier to disable it. This is mainly used in combination with the focusgroupstart attribute (see demo below).

Any modifier can be omitted if you only want to specify certain ones. By default, toolbar, tablist, and menubar have the modifier inline, menu has the modifier block, and tablist, menu and menubar have the modifier wrap.

Demo

toolbar wrap (horizontal navigation)

Click on a button to focus it and use the left and right arrow keys to navigate. When the first button is focused, you can use the left arrow to go to the last button, and when the last button is focused, you can use the right arrow to go to the first button.

<div focusgroup="toolbar wrap"> <button type="button">Bold</button> <button type="button">Italic</button> <button type="button">Underline</button> </div>

toolbar nowrap (horizontal navigation)

Click on a button to focus it and use the left and right arrow keys to navigate. Since it has the nowrap modifier, the navigation will stop at the first and last buttons and the focus will remain on that button when the right or left arrow is pressed.

<div focusgroup="toolbar nowrap"> <button type="button">Bold</button> <button type="button">Italic</button> <button type="button">Underline</button> </div>

tablist with focusgroupstart (horizontal navigation)

Focus a button in the previous demo and use TAB to go to this demo. By default, the "Windows" button will be focused when this demo is first entered with TAB because it has the focusgroupstart attribute. Use the left and right arrow keys to navigate to another button and then use TAB to go to the next demo. Use shift+TAB to go to the previous demo and notice that now the last focused button will get focus again instead of the "Windows" button. So focusgroupstart only works when the focus group is first entered with TAB.

You can combine focusgroupstart with nomemory to always go back to the button with focusgroupstart when returning to the focus group with TAB or shift+TAB (see demo below).

<div focusgroup="tablist"> <button id="tab-1">macOS</button> <button id="tab-2" focusgroupstart>Windows</button> <button id="tab-3"">Linux</button> </div>

menubar and menu (horizontal and vertical navigation)

Use the left and right arrow keys to navigate the menubar and use Enter to open the submenu of each button. With a submenu open, use TAB to go to the submenu and then use the up and down arrow keys to navigate the submenu. Use ESC to close the submenu and return to the menubar.

• About
  • Overview
  • Administration
• Admissions
  • Apply
  • Tuition
    • Undergraduate
    • Graduate
  • Visit

<ul focusgroup="menubar"> <li> <button type="button" popovertarget="aboutpop">About</button> <ul focusgroup="menu" autofocus id="aboutpop" popover> <li><a tabindex="0">Overview</a></li> <li><a tabindex="0">Administration</a></li> </ul> </li> <li> <button type="button" popovertarget="admitpop">Admissions</button> <ul focusgroup="menu" autofocus id="admitpop" popover> <li><a tabindex="0">Apply</a></li> <li> <button type="button" popovertarget="tuitpop">Tuition</button> <ul focusgroup="menu" autofocus id="tuitpop" popover> <li><a tabindex="0">Undergraduate</a></li> <li><a tabindex="0">Graduate</a></li> </ul> </li> <li><a tabindex="0">Visit</a></li> </ul> </li> </ul>

menu (vertical navigation)

Use the up and down arrow keys to navigate the menu.

• Option 1
• Option 2
• Option 3

<ul focusgroup="menu"> <li><a tabindex="0">Option 1</a></li> <li><a tabindex="0">Option 2</a></li> <li><a tabindex="0">Option 3</a></li> </ul>

menu inline nomemory (horizontal navigation)

Focus a button in the previous demo and use TAB to go to this demo. By default, the "Bold" button will be focused because it has the focusgroupstart attribute. Use the left and right arrow keys to navigate to another button and then use TAB to go to the next demo. Use shift+TAB to go to the previous demo and notice that the "Bold" button will get focus again instead of the last focused button because it has the nomemory modifier.

<nav id="one" focusgroup="menu inline nomemory"> <button focusgroupstart>Bold</button> <button>Italics</button> <button>Underline</button> </nav>

toolbar wrap with focusgroup="none"

Elements with focusgroup can be nested and elements in the group can be excluded from arrow navigation with focusgroup="none". Click the first button in the demo below and use the left and right arrows to navigate between them, notice that the second button cannot be reached with arrow keys.

<div focusgroup="toolbar wrap"> <button>A</button> <button focusgroup="none">(Not arrow reachable)</button> <button>B</button> </div>

Documentation

Focusgroup on Chrome Developer Blog

Browser support

Focusgroup is supported in Chrome and Edge 146+ with Experimental Web Platform Features enabled or with an origin trial.