← All layouts  ·  Admin

Admin shell

The sidebar-and-content frame most admin tools need.

The skeleton the rest of the admin layouts sit inside: fixed sidebar, top bar with search and account, breadcrumb, content well. Start here and drop any other layout into the well.

  • .ms-sidenav
  • .ms-shell
  • .ms-card
  • .ms-empty
  • .ms-breadcrumb-item
  • .ms-avatar-sm

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Manage</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link  ms-sidenav__link--active" href="#"><span class="material-icons">dashboard</span>Overview</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>Customers</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">inventory_2</span>Products</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">receipt_long</span>Orders</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">insights</span>Reports</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Overview</strong>
            <span class="ms-toolbar__spacer"></span>
            <input class="ms-input" placeholder="Search" style="max-width:220px">
            <span class="ms-avatar-sm">AM</span>
        </div>
        <div class="ms-shell__body">
            <nav class="ms-breadcrumb"><span class="ms-breadcrumb-item">Home</span>
                <span class="ms-breadcrumb-item">Overview</span></nav>
            <div class="ms-card">
                <h1>The shell</h1>
                <p>Sticky sidebar, sticky top bar, scrolling content well. This is the frame
                    the other admin layouts sit inside &mdash; drop any of them into the well
                    below and the chrome stays put.</p>
                <p>Below 900px the sidebar stacks above the content rather than squeezing it
                    into an unusable column.</p>
            </div>
            <div class="ms-card ms-card--outline ms-empty">
                <span class="material-icons ms-empty__icon">widgets</span>
                <p class="ms-empty__title">Content well</p>
                <p>Your page goes here.</p>
            </div>
        </div>
    </div>
</div>

More admin layouts

Analytics dashboard
CRM contacts
Data table workbench
Settings
User management