A specific layout used when a left sidebar requires a vertical navigation.
The space is organized in 3 columns for the sidebar and 9 or 8 columns for the content, depending on its type. This results in two different configurations: A 3+9 column layout and a 3+8 column layout. These configurations are covered in more detail below.
This is the default configuration for a table, a list, or any other content structure except a form.
On viewport sizes equal to or less than 768px, we introduce two key changes to the layout that optimize space for content:
This configuration is used for forms. Form containers require less space than the 9 columns that the default layout provides, so the columns are reduced to 8.
Note that, to optimize space for content, the layout changes from 8 to 9 columns on viewport sizes equal to or less than 992px.
The 3+9 column and 3+8 column layouts cover most Lexicon interfaces. There may, however, be a few edge cases that these layouts don't cover:
These scenarios are only desirable when two columns is enough for the sidebar's width. You may want to consider these configurations, If the points shown below are true for your UI:
If you use these configurations, make sure you apply two columns for the sidebar in all application sections for consistency.