ButtonsLesson 112Free preview
More Button in Nav
This lesson is part of How To · All levels
Summary
The More button inside the navigation hides additional links behind the More button so that the navigation bar remains compact. When you click the button, a dropdown menu appears containing a rare option. This pattern is suitable when the number of menus exceeds the available space.
Key points
- The More button controls the visibility of the additional menu.
- The dropdown menu uses position: absolute within the nav item positioned: relative.
- The aria-expanded attribute reflects the status of the open or closed menu.
- The menu can be closed by clicking the out-of-the-area or the Escape button.
- Don't hide the important links that users always need.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.