← All layouts · Productivity
File manager
Tree, file grid, breadcrumb and a details pane.
Breadcrumb and tree together: the tree for jumping, the breadcrumb for knowing where you landed and stepping back up.
- .ms-sidenav
- .ms-btn
- .ms-shell
- .ms-table
- .ms-breadcrumb-item
- .ms-card
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">Workspace</li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Boards</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">check_circle</span>Tasks</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">calendar_today</span>Calendar</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">folder</span>Files</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">mail</span>Inbox</a></li>
<li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>People</a></li>
</ul>
</aside>
<div class="ms-shell__main">
<div class="ms-shell__bar">
<strong>Files</strong>
<span class="ms-toolbar__spacer"></span>
<span class="ms-avatar-sm">ER</span>
</div>
<div class="ms-shell__body">
<nav class="ms-breadcrumb">
<span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Files</a></span>
<span class="ms-breadcrumb-item"><a class="ms-breadcrumb-link" href="#">Finance</a></span>
<span class="ms-breadcrumb-item">2026</span>
</nav>
<div class="ms-toolbar">
<button class="ms-btn ms-btn--primary ms-btn--sm">Upload</button>
<button class="ms-btn ms-btn--outline ms-btn--sm">New folder</button>
<span class="ms-toolbar__spacer"></span>
<input class="ms-input ms-input--sm" placeholder="Filter" style="max-width:200px">
</div>
<div class="u-grid u-grid-cols-12">
<div class="u-col-12 u-col-lg-9">
<div class="ms-card ms-card--flush">
<table class="ms-table ms-table--striped">
<thead><tr><th style="width:2rem"><input type="checkbox"></th>
<th>Name</th><th>Owner</th><th>Modified</th>
<th class="u-text-right">Size</th></tr></thead>
<tbody>
<tr><td><input type="checkbox"></td>
<td><span class="material-icons">folder</span> Q1</td>
<td>Ellie Roberts</td><td>12 Apr 2026</td>
<td class="u-text-right ms-stat__meta">—</td></tr>
<tr><td><input type="checkbox"></td>
<td><span class="material-icons">folder</span> Q2</td>
<td>Ellie Roberts</td><td>08 Jul 2026</td>
<td class="u-text-right ms-stat__meta">—</td></tr>
<tr><td><input checked type="checkbox"></td>
<td><span class="material-icons">description</span> VAT-return-Q2.pdf</td>
<td>Sam Mercer</td><td>04 Aug 2026</td>
<td class="u-text-right">248 KB</td></tr>
<tr><td><input type="checkbox"></td>
<td><span class="material-icons">table_chart</span> payroll-august.xlsx</td>
<td>Sam Mercer</td><td>20 Aug 2026</td>
<td class="u-text-right">92 KB</td></tr>
<tr><td><input type="checkbox"></td>
<td><span class="material-icons">image</span> office-fitout.jpg</td>
<td>James Doyle</td><td>19 Aug 2026</td>
<td class="u-text-right">3.1 MB</td></tr>
</tbody>
</table>
</div>
</div>
<aside class="u-col-12 u-col-lg-3">
<div class="ms-card">
<span class="ms-thumb ms-thumb--portrait"></span>
<h2>VAT-return-Q2.pdf</h2>
<table class="ms-table ms-table--compact">
<tr><th>Size</th><td>248 KB</td></tr>
<tr><th>Owner</th><td>Sam Mercer</td></tr>
<tr><th>Modified</th><td>04 Aug 2026</td></tr>
<tr><th>Shared with</th><td>3 people</td></tr>
</table>
<button class="ms-btn ms-btn--primary u-w-full">Download</button>
<button class="ms-btn ms-btn--outline u-w-full u-mt-2">Share</button>
</div>
</aside>
</div>
</div>
</div>
</div>