Top Nav Layout

A horizontal layout for apps with a handful of top-level sections: the sidebar is gone and the main navigation moves into the header. Resize the window below the lg breakpoint to see the menu collapse behind the toggler.
How this layout works

Three small differences from the default demo pages — no extra CSS or layout class required:

  • The <aside class="app-sidebar"> element is omitted. The app-wrapper grid sizes its sidebar column with auto, so an empty column collapses to zero width and the content spans the full viewport.
  • The header keeps the app-header class but becomes a regular Bootstrap navbar-expand-lg with a toggler and a .navbar-collapse menu — AdminLTE's PushMenu isn't used at all.
  • The sidebar-expand-* class is dropped from <body>, since there is no sidebar to expand.
Everything else stays the same

Cards, the content header, breadcrumbs, the footer, and the light/dark color modes all behave exactly as they do on the sidebar pages — this card is unmodified AdminLTE markup.

Monthly report generation

72%

Storage used

45%
Back to the sidebar layout