Basic Structure

The basic structure for our Modus Layout, including the sidebar, toolbar, and panel, is as follows:

div.modus-layout
      ├── nav.modus-header
      ├── div.modus-body
      |   ├── nav.modus-sidebar
      |   └── div.modus-content-rows
      |       ├── div.modus-toolbar(optional)
      |       └── div.modus-content-columns
      |           ├── div.modus-panel(optional)
      |           └── div.modus-content
      └── div.modus-footer

The page should be wrapped in a .modus-layout to set up the overall structure.

The top navbar is a standard Bootstrapnav.navbar.navbar-expand-lg with an additional class of.modus-header to apply the aesthetics. Please refer to theBootstrap Navbar Docsfor more information.

The .modus-header should be followed by.modus-body to set up the left nav area and main content area.

After .modus-body should benav.modus-sidebar which contains a vertical nav list (more info below).

The next sibling element after the .modus-sidebar should be.modus-content-rows with an optional child of.modus-toolbar.

After .modus-content-rows should be.modus-content-columns with an optional child of.modus-panel.

Your main content is housed within .modus-content inside of.modus-content-columns.

After the .modus-body, the next element should be.modus-footer.

Interactive Example

To help illustrate how all the layout elements look when displayed we have this interactive example.

Modus Sidebar

The Modus sidebar is a simple Bootstrap.nav flex-column element with an additional.modus-sidebar class for styling. Each.nav-link should have an icon or image with a class of.left-nav-icon.

The .modus-body should have a class of either.sidebar-open or .sidebar-closed to open or close the sidebar.

Toggling the sidebar is done through a menu button icon with an attribute of data-modus-item=“menu-btn”. The.modus-body should also have a corresponding attribute ofdata-modus-item=“body”.

Modus Toolbar

Our framework includes an all purpose toolbar that can be inserted inside your layout. Simply add .modus-toolbar inside.modus-content-rows.

You can use our other components, such as buttons and form groups, inside .modus-toolbar to add functionality to your application.

Modus Panel

Our framework also includes panels that can be inserted into your layout. Simply add .modus-panel inside of.modus-content-columns before .modus-content.

The panels come with .panel-header,.panel-body, and .panel-footer classes for additional layout options.

Items can be aligned to the left or right of the.panel-header by using either .left-items or.right-items classes.

You also have the option of including .static-container and.scroll-container inside the .panel-body for additional functionality.

Note: Modus Panels must be given a width using any of the following classes:

• .panel-sm (256px)
• .panel-md (352px)
• .panel-lg (448px)
• .panel-xl (544px)