This plugin allows you to create a nested navigation menu based on a list defined in a Wiki page. Lower navigation levels are shown or hidden dependent on the current page. It is intended for the use in the sidebar of a template supporting one (tested on Arctic). A notable feature is that it allows you to create hierarchical menus without the need of a hierarchical namespace structure.

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

• Version upped (2023-02-15 23:51)
• cleanup and test fixes (2023-02-15 15:40)
• Version upped (2021-02-16 14:10)
• Fix PHP 8 warnings (2021-02-16 14:09)
• Version upped (2021-01-25 15:01)
• Merge pull request #24 from cosmocode/fix-bootstrap3-fix (2021-01-25 14:59)
• Fix look of some menu items in bootstrap3 template (2021-01-25 14:29)
• Revert "Reset previously set style for lists" (2021-01-25 14:16)

In the page defining the sidebar in your template add the following syntax:

{{navi>navigationmenu}}

where navigationmenu is any other page containing an unordered list of page links — this page we call the “control page”.

Notes:

• The created menu is completely independent of any namespace structure. The hierarchy is created by the list nesting only. Exception: when the ?ns option is used (see below)
• The navigation menu page should contain exactly one unordered list, other content will be ignored
• The list items should only contain links, any other syntax will be ignored
• Each page linked in the list should occur only once
• Displayed links are dependent on user permissions. When the current user can not read a page it will not be shown (neither will any pages further down the hierarchy)

The following would create a menu with 4 top level entries: “Welcome”, “Products”, “Service” and “Wiki Syntax”. When you are on the “Products” page, the sub entries “Foomatic 2000” and “Foomatic 2010” are visible.

  * [[start|Welcome]]
  * [[Products]]
    * [[Foomatic 2000]]
    * [[Foomatic 2010]]
  * [[Service]]
    * [[about|About Foo Inc.]]
    * [[Contact]]
  * [[syntax|Wiki Syntax]]

This allows you to create hierarchical menus without the need of a hierarchical namespace structure.

Sometimes the navi plugin is used to create collapsible, editable navigation even though content is structured into nested namespaces. But since the plugin knows nothing about those namespaces by default it will collapse completely as soon as a page is opened that is not defined in the control page.

By adding ?ns to the navi plugin syntax, e.g. {{navi>navigationmenu?ns}}, you can make the plugin to be clever about namespaces: When it is called on a page that is not mentioned on the control page, it will have a look at the namespace of the page. It then checks if a startpage for the namespace is to be found in the control page. If it is, it will be used as the current open branch, if not it is checked if there is any other page in the same namespace on the controlpage. If found it's used. This is repeated for each higher namespace until the top is reached or a matching page.

Sometimes you may want to display the full navigation hierarchy (but still leave out pages without permission). Especially template authors may want to use this feature for mobile menus and such. You can do this by adding the full parameter:

{{navi>navigationmenu?ns&full}}

If you want to use the full hierarchy but be able to open without page reloads, you can use the js parameter:

{{navi>navigationmenu?ns&js}}

I use this great plugin with the bootstrap3 template. The included style.less provides some additional general layout plus a bootstrap3 fix. The latter however doesn't work (well enough) on my site, so I fixed it.

Doesn't work

aside#dokuwiki__aside .dw-sidebar-content .plugin__navi ul li.close {
    opacity: unset;
    font-size: unset;
    font-weight: unset;
}

Works

div.plugin__navi li.close {
    float: unset;
    font-size: unset;
    font-weight: unset;
    line-height: unset;
    color: unset;
    text-shadow: unset;
    filter: unset;
    opacity: unset;
}

The latter rules completely overwrite the rules from bootstrap.min.css. These work inside the div.dw-content container inside the main page and in the sidebar. This makes sense because you need a control page and a page from which you call this control page, both of which you probably edit and test using the normal DokuWiki editor.
— johng 2024-01-24 10:06