{"title":"Navigation menu","canonical":"https://help.refined.com/space/UITOOLKIT/5628887184/Navigation%20menu","format":"adf","document":{"type":"doc","content":[{"type":"paragraph","content":[{"text":"A navigation menu helps users discover key pages inside and outside of your Confluence instance.","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"style":{"value":"none"}},"macroMetadata":{"macroId":{"value":"dc83e8ae-dd2e-42af-b642-88325c48d621"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"3aa84c5c-c3a5-4c38-8a64-6c7473747410"}},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":2880,"alt":"Navigation bar in UI toolkit","id":"67165307-01e9-4b03-8f7f-7b06fcebad47","collection":"contentId-5628887184","type":"file","height":1800}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Edit the navigation menu","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Confluence top navigation menu, click ","type":"text"},{"text":"Apps","type":"text","marks":[{"type":"strong"}]},{"text":" > ","type":"text"},{"text":"Manage apps","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the left-hand menu, look for the ","type":"text"},{"text":"Refined UI Toolkit","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"heading and click ","type":"text"},{"text":"Navigation","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Preview","type":"text"}]},{"type":"paragraph","content":[{"text":"The navigation menu preview automatically updates when you make changes in the ","type":"text"},{"text":"Menu items ","type":"text","marks":[{"type":"em"}]},{"text":"or the ","type":"text"},{"text":"Settings","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Menu items","type":"text"}]},{"type":"paragraph","content":[{"text":"Set up the content of the navigation menu:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To add a new navigation item, click the ","type":"text"},{"text":"Add item","type":"text","marks":[{"type":"strong"}]},{"text":" button. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To create drop-down lists, group items together by dragging and dropping them. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"To edit a menu item’s settings, hover the item and click the ","type":"text"},{"type":"emoji","attrs":{"id":"79bc70b1-0cf2-4055-989f-53b594fcb1ed","text":":pencil:","shortName":":pencil:"}},{"text":" ","type":"text"},{"text":"Pencil","type":"text","marks":[{"type":"strong"}]},{"text":" button that appears.","type":"text"}]}]}]},{"type":"table","attrs":{"layout":"default","width":760,"localId":"15c05e3e-a917-433a-8648-4a8c60b2014e"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Item setting","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Use up to 50 characters.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Link","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Add a link to Confluence content or an external link. To use the menu item only as a “folder” to create a dropdown list, simply don’t add a link to it.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Open in a new tab","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Turn this setting on to open the page in a new tab.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Icon","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Pick one of our 60+ icons or upload your own.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Delete","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Permanently remove the item from the navigation menu.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Settings","type":"text"}]},{"type":"paragraph","content":[{"text":"Change the look and feel of the navigation menu.","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760,"localId":"e980284b-74cd-4ac3-9d82-9c11deca2e0f"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Setting","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Show navigation","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Toggle the entire menu on or off.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Background color","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Enter a HEX code or use the color picker. Users who have light mode applied in their Atlassian profile settings see this color. Users who have dark mode enabled see a default color: read more further down on this page.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Logo","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":"Image","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"Size","type":"text","marks":[{"type":"em"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Add an image to the left-hand side of the menu, and choose its size: ","type":"text"},{"text":"Small","type":"text","marks":[{"type":"em"}]},{"text":", ","type":"text"},{"text":"Medium","type":"text","marks":[{"type":"em"}]},{"text":", or ","type":"text"},{"text":"Large.","type":"text","marks":[{"type":"em"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[273]},"content":[{"type":"paragraph","content":[{"text":"Menu","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"Alignment","type":"text","marks":[{"type":"em"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[485]},"content":[{"type":"paragraph","content":[{"text":"Align items to the left, middle, or right of the menu.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Dark mode","type":"text"}]},{"type":"paragraph","content":[{"text":"The navigation menu is set to light/dark according to the viewing user’s Atlassian profile settings. Users who have light mode applied in their Atlassian profile settings see the custom color that you gave to the menu (see the “Settings” section earlier on this page). Users with dark mode enabled see a default color.","type":"text"}]}],"version":1}}