Keep the navigation hierarchy small

A personal portfolio usually needs a few clear destinations: work, about, journal, tools and contact. Start with those priorities instead of hiding a sprawling desktop sitemap behind a small icon. Short, distinct labels help someone understand the available routes quickly, especially when the menu becomes the main visible content on a phone.

Use a button to open the panel

The toggle performs an action, so use a button with a clear accessible name. Connect it to the menu panel through aria-controls and keep aria-expanded synchronized with the open state. A generic icon alone does not explain its purpose to every reader. The icon can change visually while the button’s label describes Open navigation or Close navigation.

A panel moved offscreen with a transform may still contain keyboard-focusable links. Use an appropriate hidden or inert state when it is closed, and make sure the visibility transition does not leave a contradictory intermediate state. The closed menu should not create unexpected Tab stops between the visible header and the main content.

Choose disclosure behavior deliberately

A simple navigation panel is different from a modal dialog. It can follow the ordinary document flow without trapping focus, provided the interaction remains understandable. Escape is a useful way to close it and return to the toggle. If the design makes the panel truly modal, implement and test the additional modal requirements rather than borrowing only the appearance.

Handle routes and resizing

Close the menu after someone chooses a destination. If navigation happens through a client router, update the state when the pathname changes as well as when a link is clicked. Resize from mobile to desktop and back to catch panels that retain an old open state or create duplicated visible navigation groups.

Test the menu as a real route

Open it with a keyboard, follow a link, return with browser history and reopen it. Try enlarged text, a long translated label and a narrow viewport. Ensure the panel can scroll if its content exceeds the screen height. The final menu should make moving around the portfolio easier, without introducing a separate navigation puzzle.

Further reading

Put the idea to work.

Explore free browser tools for images, text and developer workflows.

Try a free tool