Navigation field for getkirby.com

Overview

Kirby Navigation Field

A Navigation field for Kirby CMS Kirby CMS,

Preview

Installation & Usage

Copy plugin files to your plugin's directory. Use the following blueprint anywhere you want the navigation to appear:

Usage

Add the following blueprint to wherever you would like the navigation field to appear.

navigation:
  label: Navigation
  type: navigation
  levels: 5
  help: Description of menu or where it is used
  width: 1/2

Two Field methods are included which will output the menu regardless of how many levels deep you go:

<?php echo $site->navigation()->toNavigationMarkup(); ?>

If using the site as a headless CMS or would like to consume your menu in JS you can use the following field method to return an array of menu items:

<?php $site->navigation()->toNavigationArray(); ?>

Or when using Kirby Query language

{
	"query": "site",
	"select": {
		"title": "site.title",
		"navigation": "site.navigation.toNavigationArray"
	}
}

If you would like full control of your menu and would prefer to use a foreach to create the menu, that could look something like this:

  <?php if($site->navigation()->isNotEmpty()): ?>
    <ul>
      <?php foreach($site->navigation()->toStructure() as $navigation): ?>
        <li>
          <a href="<?php echo $navigation->url(); ?>">
            <?php echo $navigation->text() ?>
          </a>
          <?php if($navigation->children()->isNotEmpty()): ?>
            <ul>
              <?php foreach($navigation->children()->toStructure() as $children): ?>
                <a href="<?php echo $children->url() ?>">
                  <?php echo $children->text() ?>
                </a>
              <?php endforeach ?>
            </ul>
          <?php endif ?>
        </li>
      <?php endforeach ?>
    </ul>
  <?php endif ?>

Info

Nesting limit is set as default to 5, to allow further levels adjust the levels option in the blueprint

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Comments
  • Composer install doesn't work

    Composer install doesn't work

    I tried to add it in a section of a tab like this but got a message that navigation is not n available section type:

          - width: 1/2
            sections:
              navigation:
                label: Navigation
                type: navigation
                levels: 5
                help: Description of menu or where it is used
    

    I am using Kirby 3.6.0-beta.1 and kirby-navigation 2.0.0 via composer.

    bug 
    opened by MaluNoPeleke 18
  • Install via Composer

    Install via Composer

    Hi,

    do you plan to publish it as an composer package? Would be awesome and much easier to install/update.

    Thank your for your work. This is a super helpful plugin.

    enhancement 
    opened by TimGr 3
  • Info on how to require this package using composer?

    Info on how to require this package using composer?

    Hi, I am using a docker container with an automated composer install on build, I am trying to avoid git cloning on my container to keep the image size at a minimum size (I have a very limited hosting space) so I'd like to install this package through composer like I did with other plugins, I tried the follow to no avail, and wondering if the package naming is actually correct.

    bash-5.1# composer require chrisbeluga/kirby-navigation
    
    In PackageDiscoveryTrait.php line 364:
                                                                                                                                                                                                                      
      Could not find a matching version of package chrisbeluga/kirby-navigation. Check the package spelling, your version constraint and that the package is available in a stability which matches your minimum-sta  
      bility (stable).                                                                                                                                                                                                
                                                                                                                                                                                                                      
    
    bash-5.1# composer require chrisbeluga/kirby-navigation@^3.0
    
    In PackageDiscoveryTrait.php line 364:
                                                                                                                                                                                                                      
      Could not find a matching version of package chrisbeluga/kirby-navigation@^3.0. Check the package spelling, your version constraint and that the package is available in a stability which matches your minimu  
      m-stability (stable).                                                                                                                                                                                           
                                                                                                                                                                                                                     
    

    The readme on the repo doesn't have any instructions and I've seen in the closed issues someone mentioned for composer support since v1, but I am yet to figure out what is the package name.

    Thanks!

    opened by luigimannoni 2
  • Added field context in yaml + fixed nav output

    Added field context in yaml + fixed nav output

    Added field context in yaml example, maybe only useful for newcomers? I've found that at least one person had the same need for clarity there https://forum.getkirby.com/t/setup-navigation-field-plugin/25317

    Fixed the example for the nav full output, the parent text was used instead of the child one.

    opened by Sean-OShea 2
  • Navigation Items appear blank with Kirby 3.6

    Navigation Items appear blank with Kirby 3.6

    Hi I have been using your navigation plugin with Kirby 3.5 and it works perfectly. I'm just trying it out with Kirby 3.6 and I get no titles or no ability to edit each navigation item, as per the attached image. Is there anything I need to do to get this working again? kirby-navigation-plugin

    Many Thanks

    opened by fat-buddha-designs 2
  • Third level menu display

    Third level menu display

    Hello

    How is it possible to display a submenu within a submenu? I'm using the menu as below but I also need a submenu within the <ul class="menu vertical nested">

      <div id="responsive-menu">
        <div class="top-bar">
          <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
          <?php foreach($site->mainnavigation()->toStructure() as $navigation): ?>
            <li><a aria-label="<?php echo $navigation->text() ?>" href="<?php echo $navigation->url(); ?>"><?php echo $navigation->text() ?></a>
              <?php if($navigation->children()->isNotEmpty()): ?>
                <ul class="menu vertical nested">
                  <?php foreach($navigation->children()->toStructure() as $children): ?>
                    <li><a aria-label="<?php echo $children->text() ?>" href="<?php echo $children->url() ?>"><?php echo $children->text() ?></a></li>
                  <?php endforeach ?>
                </ul>
              <?php endif ?>
            </li>
          <?php endforeach ?>
        </ul>
        </div>
    

    Thanks for your help

    opened by fat-buddha-designs 2
  • Would Multiple Menus Be Possible?

    Would Multiple Menus Be Possible?

    Hi, I would like to create multiple different menus for a website I am building, would this be something that is possible with your plugin? I normally have the main menu and footer menu for privacy and terms of use pages and then a sitemap menu which is a list of all pages on the website.

    opened by fat-buddha-designs 2
  • Kirby 3.7 issue

    Kirby 3.7 issue

    Kirby version: 3.7.0.1 kirby-navigation version: 2.1.2

    This plug-in seem to have a Kirby 3.7 issue. When adding new "Kirby Link" item, the page selection modal is blank

    Screenshot 2022-06-30 121112

    No errors in browser console (Microsoft Edge and Firefox) nor in Kirby logs

    opened by ieteo 1
  • Use `panel.plugin({use: VueNestable})`

    Use `panel.plugin({use: VueNestable})`

    Instead using this beforeCreate hook https://github.com/chrisbeluga/kirby-navigation/blob/main/src/app.vue#L329

    you should be able to achieve the same in your https://github.com/chrisbeluga/kirby-navigation/blob/main/src/index.js via

    panel.plugin('beluga/navigation', {
        fields:  ...,
        use: VueNestable
    })
    
    opened by distantnative 1
  • Fix aria-current

    Fix aria-current

    Since we don't use pages as object, I have to use kirby()->url('current') === $child->url()->value() to get current page is open.

    • Fixes #18
    opened by afbora 0
  • UI/UX Improvement Suggestion

    UI/UX Improvement Suggestion

    The current implementation for the details modal has this footer right here with the remove button on the bottom right which is where kirby usually has the button to confirm the changes.

    Screenshot 2022-08-01 at 10 46 35 AM

    Since this is similar in spirit to the structure form I'd suggest you implement something more similar to the footer for the structure field entry so confirm button on the bottom right and a discard changes to the left. This is because muscle memory inside the panel makes it so that you immediately go in the bottom right to confirm the changes.

    Screenshot 2022-08-01 at 10 47 45 AM

    The delete action is already present in the dropdown menu so I don't think it is necessary to have it in the edit modal.

    Screenshot 2022-08-01 at 10 46 45 AM

    enhancement 
    opened by manuelmoreale 0
  • Navigation entries cannot be removed and are not displaying page/entry title/text?

    Navigation entries cannot be removed and are not displaying page/entry title/text?

    Hi and thanks for creating the plugin. I've tried using it in a Kirby 3.6.2 build running on PHP 8.0.8, but the navigation entries are not rendering their title/text. I also can't remove an entry after adding it...

    kirby-navigation-plugin-not-displaying-titles

    Any idea why this is happening and how I might fix it?

    opened by joh-sch 1
  • Highlight active menu item

    Highlight active menu item

    Hey,

    thanks for the awesome plugin. Is it possible to highlight the active menu item?

    I use:

    <?php foreach($site->navigation()->toStructure() as $navigation): ?>
      <li>
        <a <?php e($navigation->isOpen(), 'aria-current') ?> id="<?php echo $navigation->id() ?>"  href="<?php echo $navigation->url(); ?>" <?php echo $navigation->popup()->toBool() ? 'rel="noopener noreferrer" target="_blank"' : '' ?>>
      <?php echo $navigation->text() ?>
        </a>
      </li>
     <?php endforeach ?>
    

    and insert in the a-Tag this

    <?php e($navigation->isOpen(), 'aria-current') ?>
    

    Than all items are highlighted. What am I doing wrong?

    Thanks for your help!

    opened by LordCanis 1
  • Make open/close more easy Double click to open and close menu item

    Make open/close more easy Double click to open and close menu item

    Thank you for the great plugin, it already helped a lot with menu building and replaced my previous setup using structure fields nested inside structure fields :heart:

    It might be on purpose that the label is not edible inline and expanded only by click in menu (three dots + edit). But actually it is very cumbersome to edit multiple menu entries this way.

    Please consider the following suggestions:

    1. Add double click to open and close the menu item again (still two clicks but without mouse movement in between)
    2. Move the "edit" button out of the options dropdown menus directly into the menu item head next to the three dots (only one instead of two clicks)
    3. Leave duplicate and delete in the options dropdown and remove the bottom bar when toggled open completely

    Also I wanted to note that the open and close icons are misleading in my opinion (looks like add and delete when considering the icon usage in other aspects of Kirby) So I would suggest to use pencil icon to edit/open + check for closing or toggle the up / down icons in the bar (like in most accordions)

    Bildschirmfoto von 2021-11-02 16-11-52

    opened by REHvision 1
  • Relative Links and Multi Lang Menus

    Relative Links and Multi Lang Menus

    I prepared my menu locally with a different domain and ended up with non working links after deploying.

    I tried to solve it in my template something like this: $navigation->id() ?? $navigation->url() but for external links id() is an index number, so that's not working. (I guess one could test against the current host)

    Is there a better way to work around that?

    And how to handle multi lang menus? Building two?

    opened by marcus-at-localhost 2
Releases(3.0.1)
Owner
Chris Martin
Chris Martin
Sliding out and in header(s) for top navigation bar

Sliding Header Vue.js component representing sliding header (or two different headers) for top navigation bar How to use This Vue component consists o

null 42 Jul 10, 2022
vue navigation manager

vue-nav The library is a navigation manager, it is similar to native mobile app. require vue 2.x and vue-router 2.x. 中文文档 Function support cache last

nearspears 63 Sep 12, 2022
Routing and navigation for your Vue SPA. Vue 单页应用导航管理器

vue-page-stack English | 简体中文 A Vue SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it. Example preview

hezf 583 Jan 9, 2023
A ready made customized styled navigation bar, for the vuejs ( new realeases )

A ready made customized styled navigation bar, for the vuejs ( new realeases )

Adekoya Daniel 21 Jul 29, 2022
Simple page-by-page navigation for Vue.js based on your html templates with ssr support

Simple page-by-page navigation for Vue.js based on your html templates with ssr support

Denis 2 Jun 3, 2021
Vue bottom navigation

vue-bottom-navigation Table of Contents Demo Installation Usage Constructor Options License Demo Demo Installation # npm $ npm install bottom-navigat

imanmalekian31 63 Jan 8, 2023
Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation)

vue-spatialnavigation Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation) Installation npm install vue-spatialnavigation --save Sp

TWC Apps 78 Sep 23, 2022
A page navigation library, record routes and cache pages, like native app navigation. 一个页面导航库,记录路由并缓存页面,像原生APP导航一样。

vue-navigation require vue 2.x and vue-router 2.x. 中文文档 vue-navigation default behavior is similar to native mobile app (A、B、C are pages): A forward t

zack 1k Dec 7, 2022
A tabs field for the panel, to use with $field->when() conditions.

Kirby TabsField plugin A tabs field for the panel, to use with $field->when() conditions. Features: Remembers the last open tab. The field value is ne

Daan de Lange 16 Mar 7, 2022
This is web navigation component base on vue2.0+. It can be used in both PC and mobile.

vue-quick-menu This is web navigation component base on vue2.0+. It can be used in both PC and mobile. demo Installation npm install vue-quick-menu -

Ashley Lv 219 Sep 22, 2022
Minimalistic responsive navigation bar that renders routes of vue-router.

vue-router-nav Minimalistic responsive navigation bar that renders routes of vue-router. View the demo. Dependencies You need to have vue-router insta

Alex Pavlov 31 Nov 24, 2022
A NEW MAINTAINER NEEDED! Vue.js 2 tree navigation with vue-router support

vue-tree-navigation ?? ?? A new maintainer needed ?? ?? Hello friends, I haven't had enough time to maintain this project for a long time for various

Michaela Robosova 156 Dec 22, 2022
Creating a navigation menu with animations like on Stripe

Vue Stripe Menu Create a dropdown like on Stripe Demo Project How to install Install the library in your project $ npm i vue-stripe-menu // or $ yarn

Alexey Khrushch 468 Dec 20, 2022
🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

?? Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a

Luca Iaconelli 56 Aug 18, 2022
Sliding out and in header(s) for top navigation bar

Sliding Header Vue.js component representing sliding header (or two different headers) for top navigation bar How to use This Vue component consists o

null 42 Jul 10, 2022
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 142 Jul 10, 2022
vue navigation manager

vue-nav The library is a navigation manager, it is similar to native mobile app. require vue 2.x and vue-router 2.x. 中文文档 Function support cache last

nearspears 63 Sep 12, 2022
Routing and navigation for your Vue SPA. Vue 单页应用导航管理器

vue-page-stack English | 简体中文 A Vue SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it. Example preview

hezf 583 Jan 9, 2023
🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

?? An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

Luca Iaconelli 56 Aug 18, 2022
A ready made customized styled navigation bar, for the vuejs ( new realeases )

A ready made customized styled navigation bar, for the vuejs ( new realeases )

Adekoya Daniel 21 Jul 29, 2022