Feature Proposal: Improve Navbar Accessibility on Mobile and Tablet Screens

📝 Summary

On medium and mobile screen sizes, the top navigation bar progressively hides several important navigation buttons (e.g., Marketplace, Directory, Display).

While this is part of the current responsive behavior, it may reduce discoverability and accessibility of key features.

This proposal suggests introducing a consolidated "More" (overflow) menu to maintain access to all primary navigation actions when screen width is limited.

---

📌 Current Behavior

• On large screens, all primary navigation buttons are visible:

  • Home
  • Directory
  • Marketplace
  • Pages
  • Sidebar
  • Create New

• On medium screens, several buttons are hidden.

• On mobile screens, some features become difficult to access or are nested inconsistently.

This may reduce usability and discoverability for users on smaller devices.

---

📷 Screenshots

---

💡 Proposed Improvement

When screen width falls below the large breakpoint:

Keep 3 primary buttons visible:

• Home
• Pages
• Overflow menu (⋮ or ☰ icon)

Move remaining navigation actions into a structured dropdown menu:

• Directory
• Marketplace
• Display
• Create New
• Open Sidebar

---

✅ Benefits

• Improved usability on smaller screens
• Clearer navigation hierarchy
• Reduced cognitive load
• Better discoverability of features
• Consistent responsive navigation pattern

---

🧪 Environment

• Rocket.Chat branch: develop
• Browser: Chrome (latest)
• Operating System: Ubuntu 25.10

Start by locating the responsive top navigation entry point and the breakpoint logic that hides actions on medium and mobile screens. Review how existing navigation menus expose Directory, Marketplace, Display, Create New, and the sidebar. Done means the proposed primary actions remain visible, the remaining actions are available through an accessible overflow menu, and the behavior is consistent across the described screen sizes.