← All layouts  ·  Admin

settings Settings

Sectioned settings with a sticky sub-navigation.

Sections on one scrolling page with a rail that tracks position, rather than tabs. Settings are searched with the browser's own find as often as they are navigated.

• .ms-sidenav
• .ms-card
• .ms-shell
• .ms-toggle
• .ms-btn
• .ms-badge

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" 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  ms-sidenav__link--active" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Settings</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">Settings</span></nav>
            <div class="u-grid u-grid-cols-12">
                <aside class="u-col-12 u-col-lg-3">
                    <div class="ms-card ms-card--flush" style="position:sticky; top:5rem">
                        <ul class="ms-sidenav">
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#general">General</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#notifications">Notifications</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#security">Security</a></li>
                            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#danger">Danger zone</a></li>
                        </ul>
                    </div>
                </aside>

                <div class="u-col-12 u-col-lg-9">
                    <div class="ms-card" id="general">
                        <h2>General</h2>
                        <form class="ms-form">
                            <div class="ms-field">
                                <label class="ms-label" for="orgname">Organisation name</label>
                                <input class="ms-input" id="orgname" value="Northbound Ltd">
                            </div>
                            <div class="ms-field">
                                <label class="ms-label" for="tz">Time zone</label>
                                <select class="ms-select" id="tz"><option>Europe/London</option></select>
                            </div>
                            <button class="ms-btn ms-btn--primary">Save changes</button>
                        </form>
                    </div>

                    <div class="ms-card" id="notifications">
                        <h2>Notifications</h2>
                        <label class="ms-toggle"><input checked type="checkbox">
                            <span class="ms-toggle__track"><span class="ms-toggle__thumb"></span></span>
                            Email me when an order is placed</label><br><br>
                        <label class="ms-toggle"><input type="checkbox">
                            <span class="ms-toggle__track"><span class="ms-toggle__thumb"></span></span>
                            Weekly summary</label>
                    </div>

                    <div class="ms-card" id="security">
                        <h2>Security</h2>
                        <table class="ms-table">
                            <tr><td>Two-factor authentication</td>
                                <td><span class="ms-badge ms-badge--success">On</span></td>
                                <td class="u-text-right"><a class="u-link" href="#">Manage</a></td></tr>
                            <tr><td>Active sessions</td><td>3 devices</td>
                                <td class="u-text-right"><a class="u-link" href="#">Review</a></td></tr>
                        </table>
                    </div>

                    <div class="ms-card ms-card--accent-danger" id="danger">
                        <h2>Danger zone</h2>
                        <p>Deleting the organisation removes every order, product and invoice.
                            It cannot be undone.</p>
                        <button class="ms-btn ms-btn--error">Delete organisation</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More admin layouts