Mockup States:
Default (Filter Dropdown)
|
Active (Results for “April Ludgate”)
Recommendation
- Shared navigation shell: when collapsed, the sidebar stays narrow (no hover expand); a single wide/narrow toggle at the bottom pins that state; child navigation opens in a drawer on hover with a secondary Create shortcut at the top. See Top Level Navigation. On listing pages, page titles sit above primary create actions on the left; meeting detail tabs follow the same left-rail pattern—see Enhance Meeting Minutes.
- Place a search box centered in the topbar. As app-wide functionality, this provides a consistent and prominent placement.
- Search should list all content types by default. Many users use Search to navigate apps, typing the name of a document or user to quickly jump to that item instead of searching through menus.
- Search should be filterable by content type. Using an inline dropdown is a common pattern to filter results to a specific type.
- Differentiate content types by using icons or grouping under subheadings (since it may be common for the same name to be used across types).
-
(Optional) URL routes should be found via search. Searching for “Dashboard”, “Meetings”, or other navigation-terms should provide results that link to those listing pages. Index can include button labels as well, such as searching for “Meeting” provides results for “Create Meeting” and “Export Meeting” to build a quick-action command palette for power users.
Accessibility
- Ctrl/Cmd+K keyboard shortcut to focus the search bar. K is standard for search/command palettes/quick-jump boxes.
- Enter when the search box is in focus should submit a search.
- Esc should close the visible dialog.
- Up/Down arrow keys should be used to navigate among search results.
- Do not use Ctrl/Cmd+F for search, since this is reserved for web browsers’ “find within page”.
- When in focus, the dropdown should be prominently displayed, with a drop shadow or overlay beneath to denote the dropdown has focus.
- Use “Search (Township name?)” as placeholder text for the search field.
Alternatives
- In an effort to regain screen space, we may consider removing or collapsing the topbar in the future. A search icon could be placed in the navigation sidebar that would then trigger a modal search. Avoid a hovering “search” icon in the bottom right; while this is a pattern that is growing in usage, it will likely obscure important data beneath it.
- Use small “Filter by Name” or “Filter by Title” text input boxes directly above table displays to provide a more narrow search of visible data.