Adding additional categories to the vertical navigation doesn’t require a major process of redesigning the navigation UI the only major decision is how the new items should be blended into the existing category structure. Vertical navigation is an excellent choice for sites where the navigation is likely to grow in the future - large organizations that may continually evolve their offerings or content, in areas such as B2B, enterprise, government, higher education, and healthcare. Vertical navigation offers room for growth.Using vertical navigation removes the visual design constraints that limit the number of categories, allowing the team to create an IA that naturally fits the information space, and expose specific, high- information scent categories to users without requiring them to dig into the second tier of the hierarchy Specific categories increase findability and decrease interaction cost.Most benefits of this navigation UI derive from its ability to accommodate many top-tier categories. This navigation UI allowed for main categories that are specific and with high information scent and saves the users the interaction cost of first selecting a generic top-level category before seeing specific options. Arbor Restaurant’s website easily accommodated 13 global navigation categories using a vertical-navigation pattern. However, there is another type of main-navigation UI that, on desktop, can accommodate as many top-tier items as needed - vertical, left-side navigation. Findability of specific consulting areas was reduced and interaction cost was increased (because people had to open various top-level categories, scan them, and decide they were not right). Accenture hid a broad information space under a single Services category in order to artificially limit the number of top-level categories. Moreover, users will have to work more (clicking around and scanning various lower-tier categories) to find the relevant category. When we limit a broad information space into a small number of categories, we will end up with top-tier items that are too generic and will make it difficult for users to find what they need. Worst of all is changing the IA so that there are only as many main categories as will fit in the available space. To make the list of categories fit into the limited horizontal space, they will use excessively small font sizes, crowd items close to one another, or come up with unnaturally short category labels. Many teams will try to shoehorn a broad navigation hierarchy into a horizontal navigation bar on desktop sites. If we go with a large number of top-tier categories, they don’t fit in the horizontal navigation bar.Is it okay to have more than 7-9 top-tier categories in the global navigation? (Spoiler alert: it is okay, you just need to plan appropriately for it.).
Simply create a CollapsibleSidebar widget and a list of CollapsibleItems suppose _items.Every time I talk about broad hierarchies in our UX Conference course on information architecture, two questions come up: And import it: import 'package:collapsible_sidebar/collapsible_sidebar.dart' InstallationĪdd collapsible_sidebar: ^1.0.5 to your pubspec.yaml dependencies. For a better user experience, please use a mobile device to open this link. Note: this page is built with flutter-web. Pre-built customizable tile widgets (CollapsibleItems).A collapsible sidebar for Flutter apps implementing the Material Design.