variant chooses the form. Every variant brings its own direction — vertical or horizontal —, there
is no separate option for it.
| Variant | Direction | In short | Belongs in |
|---|---|---|---|
tree | vertical | everything visible, nested | sidebar |
accordion | vertical | folders expand | sidebar |
flyout | vertical | folders open a panel beside them | sidebar |
bar | horizontal | one row, sublevels behind | header, footer |
dropdown | horizontal | row, folders open a menu below | header |
mega | horizontal | row, menu with columns | header |
tabs | horizontal | tabs, children of the active one below | header, above the text |
columns | grid | column headings with entries | footer |
select | — | jump menu | wherever space is short |
pager | — | “Previous” / “Next” | below the text |
| Page | Content |
|---|---|
| 4.1 – Vertical | tree, accordion, flyout |
| 4.2 – Horizontal | bar, dropdown, mega, tabs and align |
| 4.3 – Special forms | columns, select, pager |
The form is not the scope
Which part of the tree goes into the form is decided by
rootPath,scopeanddepth(chapter 3). Every variant can be combined with every scope.