DEV Community

loading...

Discussion on: Creating a sidebar menu in Svelte

Collapse
rhaddlesey profile image
Dr Richard Haddlesey

How do we then add a submenu? Say, I hover over contact and I want a sub-menu with - phone, email, address etc to fold out from contact?

Thanks

Collapse
joshnuss profile image
Joshua Nussbaum Author

For the Sidebar, you can nest multiple levels of <nav>. The menu items that have submenus should use <button> instead of <a>. Then when the user clicks the <button>, toggle the visibility of the child <nav>.

For the Menu component, you can use a similar approach, except instead of clicking to show the submenus, you can can use CSS :hover modifier to show the submenu. Also, the submenu will need position: absolute so the it floats above

Forem Open with the Forem app