mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 15:47:23 +02:00
48 lines
No EOL
15 KiB
HTML
48 lines
No EOL
15 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Navigation and Sidebars · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta property="og:title" content="Navigation and Sidebars · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/index.html"/><meta property="og:description" content="## New Hidden Docs"/><meta name="robots" content="noindex"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="/css/main.css"/><script async="" defer="" src="https://buttons.github.io/buttons.js"></script></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img src="/img/docusaurus.svg"/><h2>Docusaurus</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/docs/installation.html" target="_self">Docs</a></li><li><a href="/en/help.html" target="_self">Help</a></li><li><a href="https://github.com/facebookexperimental/docusaurus" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html#content">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-preparation.html#content">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-creation.html#content">Creating your site</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/docs/custom-pages.html#content">Custom Pages</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/docs/navigation.html#content">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/blog.html#content">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/translation.html#content">Translations</a></li><li class="navListItem"><a class="navItem" href="/docs/search.html#content">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/versioning.html#content">Versioning</a></li></ul></div><div class="navGroup navGroupActive"><h3>API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/commands.html#content">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/api-pages.html#content">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/site-config.html#content">siteConfig.js</a></li><li class="navListItem"><a class="navItem" href="/docs/doc-markdown.html#content">Markdown Features</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-navigation.md" target="_blank">Edit this Doc</a><h1>Navigation and Sidebars</h1></header><article><div><h2><a class="anchor" name="new-hidden-docs"></a>New Hidden Docs <a class="hash-link" href="#new-hidden-docs">#</a></h2><p>New markdown files within <code>docs</code> will show up as pages on the website. Creating a file such as "docs/getting-started.md" will enable the new page <code>/docs/getting-started.html</code>.</p><p>To change the id (link name) of the file, set the <code>id</code> field in the markdown header. At the top of <code>getting-started.md</code>:</p><pre class="prism language-javascript"><span class="token operator">--</span><span class="token operator">-</span>
|
||
id<span class="token punctuation">:</span> intro
|
||
title<span class="token punctuation">:</span> Getting Started
|
||
<span class="token operator">--</span><span class="token operator">-</span>
|
||
|
||
My <span class="token operator">*</span><span class="token keyword">new</span> <span class="token class-name">content</span><span class="token operator">*</span> here<span class="token punctuation">.</span><span class="token punctuation">.</span></pre><p>Now, the doc can be accessed from <code>/docs/intro.html</code>.</p><h2><a class="anchor" name="adding-docs-to-a-sidebar"></a>Adding Docs to a Sidebar <a class="hash-link" href="#adding-docs-to-a-sidebar">#</a></h2><p>Now we want our new page to show up on the sidebar. We configure the order of the sidebar in <code>website/sidebars.json</code>.</p><p>Within <code>sidebars.json</code>, add the doc ID within an existing sidebar/category:</p><pre class="prism language-javascript"><span class="token punctuation">{</span>
|
||
<span class="token string">"docs"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">"Getting Started"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"getting-started"</span></pre><p>Or you can create a new category within the sidebar:</p><pre class="prism language-javascript"><span class="token punctuation">{</span>
|
||
<span class="token string">"docs"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token string">"My New Sidebar Category"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"getting-started"</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span></pre><h2><a class="anchor" name="new-hidden-sections"></a>New Hidden Sections <a class="hash-link" href="#new-hidden-sections">#</a></h2><p>You can also put the doc in a new sidebar. In this case we are creating a <code>intro</code> section within <code>sidebars.json</code>.</p><pre class="prism language-javascript"><span class="token punctuation">{</span>
|
||
<span class="token string">"intro"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">"My Sidebar Category"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"getting-started"</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span></pre><p>Keep in mind, until you add the section to the nav bar (below), this new "intro" section of the site will be hidden with no links going to it.</p><h2><a class="anchor" name="adding-doc-to-site-nav-bar"></a>Adding doc to site nav bar <a class="hash-link" href="#adding-doc-to-site-nav-bar">#</a></h2><p>After creating a new section of the site by adding to <code>sidebars.json</code>, you can link to the new doc from the top navigation bar by editing the <code>headerLinks</code> field of <code>siteConfig.js</code>.</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">'intro'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Getting Started'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre><h2><a class="anchor" name="custom-page-links-in-nav-bar"></a>Custom page links in nav bar <a class="hash-link" href="#custom-page-links-in-nav-bar">#</a></h2><p>To add custom pages to the navigation bar, entries can be added to the <code>headerLinks</code> of <code>siteConfig.js</code>. For example, if we have a page within <code>website/pages/help.js</code>, we can link to it by adding the following:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">{</span> page<span class="token punctuation">:</span> <span class="token string">'help'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Help'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre><h2><a class="anchor" name="external-links-in-nav-bar"></a>External links in nav bar <a class="hash-link" href="#external-links-in-nav-bar">#</a></h2><p>Custom links can be added to the nav bar with the following entry in <code>siteConfig.js</code>:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">{</span> href<span class="token punctuation">:</span> <span class="token string">'https://github.com/facebookexperimental/Docusaurus'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'GitHub'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre><p>To open external links in a new tab, provide an <code>external: true</code> flag within the header link config.</p><h2><a class="anchor" name="search-bar-position-in-nav-bar"></a>Search bar position in nav bar <a class="hash-link" href="#search-bar-position-in-nav-bar">#</a></h2><p>If search is enabled on your site, your search bar will appear to the right of your links. If you want to put the search bar between links in the header, add a search entry in the <code>headerLinks</code> config array:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> search<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre><h2><a class="anchor" name="languages-dropdown-position-in-nav-bar"></a>Languages dropdown position in nav bar <a class="hash-link" href="#languages-dropdown-position-in-nav-bar">#</a></h2><p>If translations is enabled on your site, the language dropdown will appear to the right of your links (and to the left of the search bar, if search is enabled). If you want to put the language selection drop down between links in the header, add a languages entry in the <code>headerLinks</code> config array:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Foo'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> languages<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> doc<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="custom-pages.html#content">← Previous</a><a class="docs-next button" href="blog.html#content">Next →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
|
||
/docs/installation.html">Getting Started</a></div><div><h5>Community</h5><a href="/en/users.html">User Showcase</a></div><div><h5>More</h5><a href="https://github.com/facebookexperimental/docusaurus">GitHub</a><a class="github-button" href="https://github.com/facebookexperimental/docusaurus" data-icon="octicon-star" data-count-href="/facebookexperimental/docusaurus/stargazers" data-count-api="/repos/facebookexperimental/docusaurus#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div></body></html> |