Editing the header

1

I’m wanting to customize the header - in particular the navigation menu that is, as default, links to Collections, Forms and Singletons.

I need to remove this and add links to the specific collections/singletons - for example:

Members (a collection) | Department (a collection) | Company Details (a singleton)

I have done this by directly editing the /modules/Cockpit/views/layouts/app.php file.

But is there a way to do this without editing core files?

Thanks

2

You can add custom items to the top bar with some hackish javascript. I did this in the CpMultiplaneGUI addon to link assets and the main collections/singletons. I inserted some html using the app.layout.contentbefore event and moved it with javascript into the list in the top bar.

Screenshots:

cp_custom-topbar_01
cp_custom-topbar_01953×67 6.09 KB

cp_custom-topbar_02
cp_custom-topbar_02953×67 6.18 KB

Code for inspiration:

1 Like
3

@raffaelj thanks for that - I’ve finally had time to look at it and have managed to work out a solution based on your answer.

In case anyone else is wanting to do something similar here’s what I did:

In /config/bootstrap.php

<?php

    // custom nav
    // add menu item for all Collections and Singletons from "menu.aside"
        $app->on('app.layout.contentbefore', function() {
        $this->renderView('cockpit:views/_partials/nav.php');
        });
    ?>

In /modules/Cockpit/views/layouts/_partials/nav.php

<div id="custom_nav">
 <nav class="navbar">

 <ul class="nav-links">
 <div class="menu">
 <li><a href="/data/cockpit/dashboard">Dashboard</a></li>
 <li><a href="/data/singletons/form/settings">Settings</a></li>
 <li class="top">
 <a href="/data/collections/entries/Locactions">Locations</a>

 <ul class="dropdown">
 <li><a href="/data/collections/entries/Country">Countries</a></li>
 </ul>
 </li>
 <li><a href="/data/collections/entries/Staff">Staff</a></li>
 <li><a href="/data/collections/entries/Downloads">Downloads</a></li>
 </div>
 </ul>
 </nav>

</div>

<script>
// move list item to menu bar
App.$('.app-modulesbar').prepend(App.$('#custom_nav'));
</script>

Many thanks for your help!