====== Sidebar ======

The sidebar is DokuWiki’s main navigation feature.

It even has its own [[doku>faq:sidebar|Sidebar FAQ]] page with instructions for how to set it up. Please read that page first, before you read further here, as it already answers many questions that you may have.

====== Appearance ======

The template adds a couple of convenience features to the standard sidebar setup. Most importantly, in **desktop** view, the user can “fold” it to the side to give the main content more space. This can be useful for wide graphics, tables, etc.

<aside float-right outline box><figure>{{:components:sidebar:nuropa-sidebar-mobile.png?nolink&200 |Nuropa sidebar on mobile view}}<figcaption>The sidebar in mobile view.</figcaption></figure></aside>On **mobile** view, the sidebar becomes a navigation popup instead. It is hidden away until the user clicks the menu button, after which it will open as a sheet on top of the main page content (see image for an example).

<aside info>**Note:** The sidebar used for this site can be examined [[:sidebar|here]]. Note that some of the code therein relies on the [[doku>plugin:adhoctags|Ad-Hoc HTML PLugin]] to function.</aside>

===== Configuration =====
==== DokuWiki configs ====

There are not template configuration settings for the sidebar, but please note the following DokuWiki setting that are relevant for how your sidebar is shown:

  * [[doku>config:sidebar|Sidebar]] – configure the page name that is used for sidebars.

==== Style settings ====

In the <a [href=?do=admin&page=styling] [target=_blank]>Template Style Settings</a>, the following options are directly related to the appearance of the sidebar:

  * **Sidebar width** – how wide should the sidebar be (can be any CSS length, though ''px'' or ''rem'' are probably most useful here).
  * **Sidebar text colour** – Colour of plain text items in the sidebar<strong red>*</strong>.
  * **Sidebar link colour** – Colour of links in the sidebar<strong red>*</strong>.
  * **Sidebar icon colour** – Colour of icons in the sidebar<strong red>*</strong>.

<aside info>**Note 1:** All “colour” items (marked with <strong red>*</strong>) exist in two variants, the second of which is used for the “dark mode”, if enabled.</aside>

===== See also =====

  * [[components:menubar:index|Menubar]]