![[Jenkins]](/jenkins/static/0ee714c5/images/svgs/logo.svg){kind=logo}
Two column
Two column layouts are for 'hub' style pages, pages that have child pages for the user to navigate to.
Examples of such pages include 'Dashboard', 'Design Library' and 'Plugin Manager'.
| Do | Don't |
|---|---|
| Include a title on your sidebar that best encapsulates its child pages | Don't include hierarchical navigation in your sidebar, such as "Back to Dashboard" or "Up" |
| Ensure all child pages share the same sidebar for consistency | Don't include actions or external pages in your sidebar, these belong in the top app bar |
| Buttons should only relate to/manipulate their parent column | |
| One (and only one) sidebar item should be in its selected state at a time |
Usage
The 'two-column' layout is default, so you don't need to do anything to use it.
The example above is all you need to set up a two-column page, it's complete with headings, sidebar items and content.
Badges
You can include badges (instances of jenkins.management.badge) in your sidebar to highlight important information.
You should only use a badge if the information is useful to the user, for example:
- Updates count on the 'Plugins' page
- Passing/failed tests count
- Unread notifications
One column
One column layouts are for pages that don't need navigation; they're ideal for standalone pages that don't have child navigation.
| Do | Don't |
|---|---|
| Use the "one-column" layout if your page doesn't need a sidebar | Avoid sprawling content, use tabs if your page is lengthy and can be separated into clearly labelled sections |
Usage
Set the type attribute to 'one-column' to use this layout:
Fullscreen
Fullscreen layouts hide the Jenkins user interface, providing a blank canvas for your page. Such layouts aren't intended for the average page and should only be used if your page needs it.
An example of such a page is Build Monitor View
Usage
Set the type attribute to 'full-screen' to use this layout: