Admin Layout & Configuration Dashboards
Admin-style layout and dashboard partials for surfacing site configuration, build info, and feature flags in a single place.
Table of Contents
Admin Layout & Configuration Dashboards
The zer0-mistakes theme ships an admin layout and a set of dashboard partials for surfacing site configuration, build metadata, and feature flags — all in one place, without requiring a CMS or backend.
The theme’s demo site ships a suite of ready-made admin pages — Configuration, Statistics, Theme Customizer, Theme Preview, Navigation Editor, Collection Manager, Analytics Dashboard, and Environment & Build. This site’s slimmed content set does not include them, but they read straight from _config.yml and Jekyll’s site data, so any of them can be recreated with a single frontmatter block (see below).
Admin Layout
Any page can use the admin layout by setting layout: admin in its frontmatter:
---
layout: admin
title: Site Configuration
icon: bi-gear
---
Supported Frontmatter
| Field | Type | Description |
|---|---|---|
icon |
string | Bootstrap Icons class shown in the page header (e.g. bi-gear) |
admin_nav |
boolean | Show the admin sidebar (default: true) |
admin_section |
string | Active section key for sidebar highlighting |
admin_actions |
array | Header action buttons (label, url, icon, style) |
Layout Structure
Admin page
├── Admin header (breadcrumbs + icon + title + action buttons)
├── Admin sidebar (collapsible; collapses to offcanvas on mobile)
└── Main content (page body, tab panels, data tables, …)
Admin Navigation
A dedicated sidebar navigation partial is included automatically with the admin layout:
_includes/navigation/admin-nav.html
It renders a vertical nav with links to all admin/settings pages.
Tabbed Admin Pages
Use the admin-tabs component to split a single admin page into tabs:
{% include components/admin-tabs.html
id="config"
tabs="view:View Config:bi-eye:true|edit:Edit & Export:bi-pencil-square:false|raw:Raw YAML:bi-file-earmark-code:false"
%}
<div class="tab-content pt-4" id="configTabContent">
<div class="tab-pane fade show active" id="pane-view" role="tabpanel">
<!-- your content -->
</div>
</div>
Each tab definition is id:label:icon:active, pipe-separated.
Built-In Admin Pages
The theme repo’s demo site ships several admin pages (in its about collection) that make good starting points — this slimmed site does not publish them, but each is just frontmatter plus dashboard includes:
| Page | Purpose |
|---|---|
config.md |
View and export _config.yml |
theme.md |
Theme colours and Bootstrap overrides |
navigation.md |
Edit navigation data |
analytics.md |
Analytics provider settings |
collections.md |
Collection configuration |
environment.md |
Build environment info |
Creating a Custom Admin Page
---
layout: admin
title: My Dashboard
description: Custom dashboard for my site
preview: /images/previews/admin-layout-configuration-dashboards.png
icon: bi-speedometer2
permalink: /admin/my-dashboard/
sidebar:
nav: docs
---
# My Dashboard
Add your content here. Use Bootstrap 5 components freely.