# Grid navigation (/main-modules/indev/gridnav)



Overview [#overview]

Grid navigation (gridnav for short) is a feature that moves focus among a set
of child Widgets via arrow-key presses.

If the child Widgets are arranged into a grid-like layout then the up, down,
left and right arrows move focus to the nearest sibling in the
respective direction.

It doesn't matter how the children are positioned, as only the current x
and y coordinates are considered. This means that gridnav works with
manually positioned children, as well as [Flex](/common-widget-features/layouts/flex) and
[Grid](/common-widget-features/layouts/grid) layouts.

Gridnav also works if the children are arranged into a single row or
column. This is useful, for example, to simplify navigation among items in a
[List Widget](/widgets/list).

Gridnav assumes that the Widget to which gridnav is added is part of a
[group](/main-modules/indev/groups). This way, if the Widget with
gridnav has focus, the arrow key presses are automatically forwarded to
the Widget so that gridnav can process the arrow keys.

To move the focus to the next widget of the group use
<ApiLink name="LV_KEY_NEXT" /> or <ApiLink name="LV_KEY_PREV" />.
Optionally you can also use <ApiLink name="lv_group_focus_next" />
or <ApiLink name="lv_group_focus_prev" /> or the `TAB`
key on keyboard as usual.

If the container is scrollable and the focused child is out of the view,
gridnav will automatically scroll the child into view.

Usage [#usage]

To add gridnav behavior to any Widget (e.g. one serving as a container for
child Widgets that the end user will navigate among using arrow keys) use
<ApiLink name="lv_gridnav_add" display="lv_gridnav_add(container, flags)" />.

The `flags` argument controls the navigation behavior:

* <ApiLink name="LV_GRIDNAV_CTRL_NONE" />: Default settings
* <ApiLink name="LV_GRIDNAV_CTRL_ROLLOVER" />: If there is no next/previous Widget in a
  direction, the focus goes to the Widget in the next/previous row (on
  left/right keys) or first/last row (on up/down keys)
* <ApiLink name="LV_GRIDNAV_CTRL_SCROLL_FIRST" />: If an arrow is pressed and the focused
  Widget can be scrolled in that direction then it will be scrolled instead of
  going to the next/previous Widget. If there is no more room for scrolling the
  next/previous Widget will receive focus normally.
* <ApiLink name="LV_GRIDNAV_CTRL_HORIZONTAL_MOVE_ONLY" />: Only use the left/right keys
  for grid navigation. Up/down key events will be sent to the Widget that has focus.
* <ApiLink name="LV_GRIDNAV_CTRL_VERTICAL_MOVE_ONLY" />: Only use the up/down keys
  for grid navigation. Left/right key events will be sent to the Widget that has focus.

While the above behaviors can be combined by bit-wise OR-ing the above values together,
<ApiLink name="LV_GRIDNAV_CTRL_HORIZONTAL_MOVE_ONLY" /> and <ApiLink name="LV_GRIDNAV_CTRL_VERTICAL_MOVE_ONLY" />
should not be used together.

<ApiLink name="lv_gridnav_remove" display="lv_gridnav_remove(container)" /> Removes gridnav behavior from a Widget.

Focusable Widgets [#focusable-widgets]

A Widget needs to be clickable or click focusable
(<ApiLink name="LV_OBJ_FLAG_CLICKABLE" /> or <ApiLink name="LV_OBJ_FLAG_CLICK_FOCUSABLE" />) and not
hidden (<ApiLink name="LV_OBJ_FLAG_HIDDEN" />) to receive focus via gridnav.

Examples [#examples]

Basic grid navigation [#basic-grid-navigation]

<LvglExample name="lv_example_gridnav_1" path="others/gridnav/lv_example_gridnav_1" />

Grid navigation on a list [#grid-navigation-on-a-list]

<LvglExample name="lv_example_gridnav_2" path="others/gridnav/lv_example_gridnav_2" />

Nested grid navigations [#nested-grid-navigations]

<LvglExample name="lv_example_gridnav_3" path="others/gridnav/lv_example_gridnav_3" />

Simple navigation on a list widget [#simple-navigation-on-a-list-widget]

<LvglExample name="lv_example_gridnav_4" path="others/gridnav/lv_example_gridnav_4" />

Grid navigation for only one axis [#grid-navigation-for-only-one-axis]

<LvglExample name="lv_example_gridnav_5" path="others/gridnav/lv_example_gridnav_5" />

API [#api]