Homepage
Main navigation
Main content
Additional information
October Tricks
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
October CMS resources and help articles
Simple and to the point. Optimized by the community.
×
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
Edit trick
Changes will be published after manual review
Title
Give your trick a describing title. Do
not
start with «How to...».
Your trick
Keep it short and concise! Markdown is supported.
The `NavigationManager` (available through the `BackendMenu` facade) has the ability to register a special menu called `contextSideNav`. This allows you to create custom side menus for your plugins, such as the one used in the System Settings page. This trick will help you re-create the setting style sidenav for your plugin. ## Part 1 - Create sidenav partials Create a new folder in your plugin directory called `partials` Create a new file in the `partials` directory called `_sidenav.htm` with the contents below: ``` <!-- Main sidenav menu wrapper --> <div style="background: steelblue;" class="layout-cell sidenav-tree" data-control="sidenav-tree" data-search-input="#settings-search-input"> <div class="layout"> <div class="layout-row min-size"> <?= $this->makePartial('$/author/plugin/partials/_sidenav_search_toolbar.htm') ?> </div> <div class="layout-row"> <div class="layout-cell"> <div class="layout-relative"> <div class="layout-absolute"> <div class="control-scrollbar" data-control="scrollbar"> <?= $this->makePartial('$/author/plugin/partials/_sidenav_menu.htm') ?> </div> </div> </div> </div> </div> </div> </div> ``` Create a new file in the `partials` directory called `_sidenav_search_toolbar.htm` with the contents below: ``` <!-- Search form on top of sidenav --> <div class="layout control-toolbar"> <div class="layout-cell"> <div class="relative toolbar-item loading-indicator-container size-input-text"> <input placeholder="<?= e(trans('system::lang.settings.search')) ?>" type="text" name="search" value="" class="form-control icon search" id="settings-search-input" autocomplete="off" data-track-input data-load-indicator data-load-indicator-opaque /> </div> </div> </div> ``` Create a new file in the `partials` directory called `_sidenav_menu.htm` with the contents below: ```php <!-- Sidebar menu --> <?php $sideMenuItems = BackendMenu::listSideMenuItems(); if ($sideMenuItems): $collapsedGroups = explode('|', isset($_COOKIE['sidenav_treegroupStatus']) ? $_COOKIE['sidenav_treegroupStatus'] : null); $categories = []; foreach ($sideMenuItems as $sideItemCode => $item){ if(!property_exists($item, 'group')) $item->group = 'default'; if(!property_exists($item, 'keywords')) $item->keywords = ''; if(!property_exists($item, 'description')) $item->description = ''; $categories[$item->group][$sideItemCode] = $item; } ?> <ul class="top-level"> <?php foreach ($categories as $category => $items): $collapsed = in_array($category, $collapsedGroups); ?> <li data-group-code="<?= e($category) ?>" <?= $collapsed ? 'data-status="collapsed"' : null ?> > <div class="group"> <h3><?= e(trans($category)) ?></h3> </div> <ul> <?php foreach ($items as $item): ?> <li class="<?= BackendMenu::isSideMenuItemActive($item) ? 'active' : null ?>" data-keywords="<?= e(trans($item->keywords)) ?>"> <a href="<?= $item->url ?>"> <i class="sidebar-menu-item <?= $item->icon ?>"></i> <span class="header"><?= e(trans($item->label)) ?></span> <span class="description"><?= e(trans($item->description)) ?></span> </a> </li> <?php endforeach ?> </ul> </li> <?php endforeach ?> </ul> <?php endif; ?> ``` ## Part 2 - Registering the contextSidenavPartial Add this code to your `Plugin.php` file: ```php use BackendMenu; public function register() { BackendMenu::registerContextSidenavPartial('Author.PluginName', 'owner', '$/author/plugin/partials/_sidenav.htm'); } ``` That's all there is to it. Note we have re-created the settings style menu here, but you would be free to use any style you wish.
References
Add additional online resources to your trick
×
Name
URL
×
Name
URL
×
Name
URL
+ Add reference
Topics
If your trick fits more than one topic select multiple. Select at least one.
Backend
Plugin Development
CMS
Twig
Themes
Deployment
Tags
You can use existing tags or create new ones. Add at least one.
Submit for review
Cancel
We use cookies to measure the performance of this website. Do you want to accept these cookies?
Accept
Decline