MenusLesson 41Free preview

Dropdown in Sidenav

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Dropdown in Sidenav Menu. This component allows nested menus to be grouped inside the sidebar, where clicking on the menu title will expand the sub-link down using JavaScript.

Key points

Place the dropdown trigger button inside the vertical structure of the sidebar
Pack sub-links inside the container with display: (.dropdown-container)
Use JavaScript to toggle the visibility of the block when the button is clicked
Add rotation or animation to the caret arrow icon when the status is open

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.