[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Forganizing\u002Fnavigation":3},{"html":4,"toc":5,"description":22,"hero":23,"list":24,"socialImage":25},"\u003Ch1 id=\"navigation\">Navigation\u003C\u002Fh1>\n\u003Cp>Clay builds the navigation from your \u003Ccode>docs\u002F\u003C\u002Fcode> folder; there is no separate menu to maintain. Add a page and it appears, move it into a folder and it moves in the sidebar.\u003C\u002Fp>\n\u003Ch2 id=\"the-sidebar\">\u003Ca class=\"heading-anchor\" href=\"#the-sidebar\" aria-label=\"Link to this section\" data-route=\"#the-sidebar\">#\u003C\u002Fa>The sidebar\u003C\u002Fh2>\n\u003Cp>The sidebar lists every page and every folder that contains pages, nested the way your folders are. A folder’s title opens the folder’s page; the arrow next to it shows and hides the pages in it. The page you are reading is marked, and the folders around it open on their own. On small screens, the sidebar moves into a drawer behind the menu button in the top left corner.\u003C\u002Fp>\n\u003Ch2 id=\"order\">\u003Ca class=\"heading-anchor\" href=\"#order\" aria-label=\"Link to this section\" data-route=\"#order\">#\u003C\u002Fa>Order\u003C\u002Fh2>\n\u003Cp>Within each folder, pages and folders are sorted together:\u003C\u002Fp>\n\u003Cdiv class=\"clay-steps\">\u003Col>\n\u003Cli>Entries with an \u003Ccode>order\u003C\u002Fcode> come first, from the lowest number up.\u003C\u002Fli>\n\u003Cli>All other entries follow in alphabetical order of their file or folder name.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\u003Cp>Pages get their \u003Ccode>order\u003C\u002Fcode> in their \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fpages#front-matter\" data-route=\"\u002F4.x\u002Fwriting\u002Fpages#front-matter\">front matter\u003C\u002Fa>, folders in the front matter of their \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Ffolders\" data-route=\"\u002F4.x\u002Forganizing\u002Ffolders\">index.md\u003C\u002Fa>:\u003C\u002Fp>\n\u003Cdiv class=\"clay-tabs\" data-tabs=\"\">\u003Cdiv role=\"tablist\" class=\"tabs tabs-border not-prose\">\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-0\" class=\"tab tab-active\" aria-controls=\"clay-tabs-1-0-panel\" aria-selected=\"true\" tabindex=\"0\">A page\u003C\u002Fbutton>\u003Cbutton type=\"button\" role=\"tab\" id=\"clay-tabs-1-1\" class=\"tab\" aria-controls=\"clay-tabs-1-1-panel\" aria-selected=\"false\" tabindex=\"-1\">A folder\u003C\u002Fbutton>\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-0-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-0\" data-label=\"A page\">\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Finstallation.md\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Installation\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#076240;--shiki-dark:#B5CEA8\">1\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cdiv role=\"tabpanel\" id=\"clay-tabs-1-1-panel\" class=\"clay-tab-panel\" aria-labelledby=\"clay-tabs-1-1\" data-label=\"A folder\" hidden=\"\">\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>docs\u002Fguides\u002Findex.md\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#076240;--shiki-dark:#B5CEA8\">2\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>For example, this folder:\u003C\u002Fp>\n\u003Cdiv class=\"file-tree not-prose\">\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">docs\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">changelog.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">no order\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">faq.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">no order\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry file-tree-folder\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-solid fa-folder\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">guides\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">order: 2 in guides\u002Findex.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">installation.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">order: 1\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">introduction.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">order: 0\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n\u003Cp>is shown as: Introduction, Installation, Guides, Changelog, FAQ.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>Number in steps of ten (10, 20, 30) to leave room for pages you add later, or let \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Fclay-edit\" data-route=\"\u002F4.x\u002Forganizing\u002Fclay-edit\">clay edit\u003C\u002Fa> number them for you: it sets \u003Ccode>order\u003C\u002Fcode> on everything in a folder when you move an entry.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cp>Numbers can be negative, and entries with the same number keep their alphabetical order.\u003C\u002Fp>\n\u003Ch2 id=\"breadcrumbs\">\u003Ca class=\"heading-anchor\" href=\"#breadcrumbs\" aria-label=\"Link to this section\" data-route=\"#breadcrumbs\">#\u003C\u002Fa>Breadcrumbs\u003C\u002Fh2>\n\u003Cp>The navbar shows where the current page sits: \u003Cstrong>Guides › Advanced › Tuning\u003C\u002Fstrong>. Each part links to its folder’s page. Deeply nested pages show the last three levels. Breadcrumbs are hidden on small screens, where the drawer takes their place.\u003C\u002Fp>\n\u003Ch2 id=\"folder-pages\">\u003Ca class=\"heading-anchor\" href=\"#folder-pages\" aria-label=\"Link to this section\" data-route=\"#folder-pages\">#\u003C\u002Fa>Folder pages\u003C\u002Fh2>\n\u003Cp>Every folder has a page of its own, at its path: \u003Ccode>\u002Fguides\u003C\u002Fcode> for \u003Ccode>docs\u002Fguides\u002F\u003C\u002Fcode>. It is the folder’s \u003Ccode>index.md\u003C\u002Fcode>, or, without one, the folder’s title with a list of the pages and subfolders in it. Breadcrumbs and links to a folder lead there. See \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Findex-pages\" data-route=\"\u002F4.x\u002Forganizing\u002Findex-pages\">index pages\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"previous-and-next\">\u003Ca class=\"heading-anchor\" href=\"#previous-and-next\" aria-label=\"Link to this section\" data-route=\"#previous-and-next\">#\u003C\u002Fa>Previous and next\u003C\u002Fh2>\n\u003Cp>At the bottom of each page, links lead to the previous and the next page. They follow the order of the sidebar across folders, including the folders’ own pages, so readers can go through the docs from start to end like a book.\u003C\u002Fp>\n",[6,10,13,16,19],{"id":7,"text":8,"level":9},"the-sidebar","The sidebar",2,{"id":11,"text":12,"level":9},"order","Order",{"id":14,"text":15,"level":9},"breadcrumbs","Breadcrumbs",{"id":17,"text":18,"level":9},"folder-pages","Folder pages",{"id":20,"text":21,"level":9},"previous-and-next","Previous and next","How Clay builds the sidebar, breadcrumbs and previous\u002Fnext links, and how to put pages in order.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Forganizing\u002Fnavigation.png",1792666369398]