Hi @bhaveshraja, I'm tightening up the navigation menu (the top-of-page nav with dropdowns like Product and Resources) and want your read on the defaults.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
-
The top-level items. Each item (Product, Resources, Pricing) is a pill at 13px in our secondary grey with a little side padding. It highlights softly on hover, and the open one gets a slightly stronger highlight. Should every nav item look and behave exactly like that?
-
The little arrow. Items that open a dropdown show a small downward caret in our muted grey that spins around when the dropdown opens. Should every dropdown nav item use that same arrow, at that size and color, opening the same way? Or could some skip the arrow?
-
The dropdown panel. The dropdown is a rounded panel with a soft divider line around it, a small shadow, and a touch of inside padding, and it gently scales in. Should that panel always look and animate the same way?
-
The links inside. In the examples a link shows a title in our primary text and a description below it in our lighter grey. Is that title-plus-description layout something the component should own and always show, or should each place decide how a link looks inside?
-
The focus ring. When you tab to an item it shows an accent ring around it. Should that ring always look the same?
-
The gap below. The dropdown opens with a small gap below the nav. Should that gap always be the same distance?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tightening up the navigation menu (the top-of-page nav with dropdowns like Product and Resources) and want your read on the defaults.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
The top-level items. Each item (Product, Resources, Pricing) is a pill at 13px in our secondary grey with a little side padding. It highlights softly on hover, and the open one gets a slightly stronger highlight. Should every nav item look and behave exactly like that?
The little arrow. Items that open a dropdown show a small downward caret in our muted grey that spins around when the dropdown opens. Should every dropdown nav item use that same arrow, at that size and color, opening the same way? Or could some skip the arrow?
The dropdown panel. The dropdown is a rounded panel with a soft divider line around it, a small shadow, and a touch of inside padding, and it gently scales in. Should that panel always look and animate the same way?
The links inside. In the examples a link shows a title in our primary text and a description below it in our lighter grey. Is that title-plus-description layout something the component should own and always show, or should each place decide how a link looks inside?
The focus ring. When you tab to an item it shows an accent ring around it. Should that ring always look the same?
The gap below. The dropdown opens with a small gap below the nav. Should that gap always be the same distance?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!