DEV Community

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

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