Layouts

Principles and page structures to guide user focus, establish visual hierarchy, and maintain consistent interfaces.

Copy link to headline:Core principles

Every layout should adhere to two fundamental rules:

Responsive
Layouts must adapt seamlessly across screen sizes and device types.
Content-driven
Layout is determined by content requirements. Prioritize information architecture before selecting layout patterns.

Use our grid system to ensure consistent alignment and spacing.

Standard applications are structured around four distinct layout regions:

Main navigation
Persistent top or left bar providing global routing and system controls. See OnyxNavBar.
Sidebar
Side panel for master-detail views, sub-navigation, or filtering. Stays pinned to the left or right screen edge. See OnyxSidebar.
Page content
Primary content viewport governed by the grid system and active scroll container. See OnyxPageLayout.
Bottom bar
Pinned footer area for action buttons, status indicators, and batch operations. See OnyxBottomBar.

For container alignment and max-width options, see the grid documentation.

Use OnyxAppLayout and OnyxPageLayout to assemble the application frame:

Internal component content is left-aligned. Center or right alignment is reserved for specialized cases, such as numeric table columns.

Left-align content within components.

Do not center- or right-align component content, except in numeric table cells.

Structure interfaces by clustering related elements:

Proportion & balance
Keep consistent proportions across sections to avoid visual imbalance.
Spatial grouping
Group functionally related elements together. Use white space, typography, and dividers to distinguish logical blocks and minimize cognitive load.