diff --git a/.gitignore b/.gitignore index c397e70dc..b49d78140 100644 --- a/.gitignore +++ b/.gitignore @@ -123,6 +123,9 @@ yalc.lock .history/* .vscode/* +# ignore build site vscode +build.washingtonpost.com/.vscode/ + # ignore the storybook build build.washingtonpost.com/public/storybook/**/* diff --git a/build.washingtonpost.com/docs/components/navigation-menu.mdx b/build.washingtonpost.com/docs/components/navigation-menu.mdx index 881be9c4a..efed64b7d 100644 --- a/build.washingtonpost.com/docs/components/navigation-menu.mdx +++ b/build.washingtonpost.com/docs/components/navigation-menu.mdx @@ -25,7 +25,7 @@ openSourceLink: https://www.radix-ui.com/docs/primitives/components/navigation-m ### Orientation -Navigation menu supports both [horizontal] and [vertical] layout orientations. In [horizontal] orientation, menu links are baseline-aligned, ordered from left to right. In [vertical] orientation, menu links are left-aligned, ordered from top to bottom. +Navigation menu supports both `[horizontal]` and `[vertical]` layout orientations. In `[horizontal]` orientation, menu links are **baseline-aligned**, ordered from **left to right**. In `[vertical]` orientation, menu links are **left-aligned**, ordered from **top to bottom**. ```jsx withPreview @@ -34,26 +34,23 @@ Navigation menu supports both [horizontal] and [vertical] layout orientations. I - + - Apples + Horizontal 2 - Bananas + Horizontal 3 - Oranges + Horizontal 4 - Pears + Horizontal 5 @@ -64,63 +61,25 @@ Navigation menu supports both [horizontal] and [vertical] layout orientations. I - + - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - {`Link`} - - - - - - - - - Apples + Vertical 2 - Bananas + Vertical 3 - Oranges + Vertical 4 - Pears + Vertical 5 @@ -136,63 +95,54 @@ Navigation menu supports both [horizontal] and [vertical] layout orientations. I Navigation menu supports one level of sub-navigation. ```jsx withPreview - + - - + + {`Ohio`} - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - + + {`Rhode Island`} + + + + + + + + + {`Wisconsin`} + + + + + + + + + {`California`} - Apples + Oakland - Bananas + San Francisco - Oranges + Los Angeles - Pears + San Diego @@ -203,32 +153,23 @@ Navigation menu supports one level of sub-navigation. - - {`Link`} - - - + + {`Texas`} - Apples + Austin - Bananas + Houston - Oranges + Dallas - Pears + El Paso @@ -239,37 +180,36 @@ Navigation menu supports one level of sub-navigation. ``` -### Trigger +--- + +## Behavior + +### Hover -Trigger a navigation menu with a call to action, such as a button, link, icon, or other control. +Menu links change color to `[$accessible]` on hover. Submenu links display background color `[$faint]` on hover. ```jsx withPreview - + - - + + {`Fruit`} - Apples + Apple - Bananas + Orange - Oranges + Banana - Pears + Pineapple @@ -280,27 +220,23 @@ Trigger a navigation menu with a call to action, such as a button, link, icon, o - - + + {`Vegetable`} - Apples + Broccoli - Bananas + Carrot - Oranges + Cucumber - Pears + Submenu Link @@ -311,32 +247,26 @@ Trigger a navigation menu with a call to action, such as a button, link, icon, o - - {`Link`} - - - + + {`Protein`} - Apples + Fish - Bananas + Chicken - Oranges + Beef - Pears + Lamb + + + Pork @@ -344,616 +274,31 @@ Trigger a navigation menu with a call to action, such as a button, link, icon, o - -``` - -### Position - -The display position can be defined directionally based on the location of the trigger. - -```jsx withPreview demoHeight="1235" - - - {`Bottom`} - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - {`Top`} - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - Bananas - - - Oranges - - - Pears - - - - - - - - - - - - - {`Left`} - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - - {`Right`} - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - - - - - - - - Apples - - - - Bananas - - - - - Oranges - - - - Pears - - - - - - - - - - - -``` - ---- - -## Behavior - -### Hover - -Menu links change color to [$accessible] on hover. Submenu links display background color [$faint] on hover. - -```jsx withPreview - - - - Live updates - - - Map - - - FAQ - + - {`How to prepare`} - - - + {`Carbohydrate`} - + - Apples + White Bread - Bananas + Brown Rice - Oranges + Oats - Pears + Quinoa - - Flattening the curve - - - Newsletter - @@ -961,7 +306,7 @@ Menu links change color to [$accessible] on hover. Submenu links display backgro ### Active -Any menu link can be set to [active] to indicate the page or section currently in view. Active links are rendered in font-weight bold. +Any menu link can be set to `[active]` to indicate the page or section currently in view. Active links are rendered in font-weight **bold**. ```jsx withPreview @@ -969,18 +314,9 @@ Any menu link can be set to [active] to indicate the page or section currently i - - Live updates - - - Map - - - FAQ - - {`How to prepare`} + {`Fruits`} - - {`Apples`} - + Apples - Bananas + Bananas Oranges @@ -1025,12 +359,6 @@ Any menu link can be set to [active] to indicate the page or section currently i - - Flattening the curve - - - Newsletter - @@ -1038,7 +366,7 @@ Any menu link can be set to [active] to indicate the page or section currently i ### Disabled -A menu (or submenu) link can be set to [disabled], according to the user’s current context and relevance of options. +A menu (or submenu) link can be set to `[disabled]`, according to the user’s current context and relevance of options. ```jsx withPreview @@ -1046,18 +374,9 @@ A menu (or submenu) link can be set to [disabled], according to the user’s cur - - Live updates - - - Map - - - FAQ - - {`How to prepare`} + {`Fruits`} - Apples + Apples - Bananas + Bananas Oranges @@ -1100,12 +419,6 @@ A menu (or submenu) link can be set to [disabled], according to the user’s cur - - Flattening the curve - - - Newsletter - @@ -1113,7 +426,7 @@ A menu (or submenu) link can be set to [disabled], according to the user’s cur ### Overflow -For submenus containing a large number of links, define a max-height and set the container to [scroll] to allow users to access additional items. +For submenus containing a large number of links, define a **max-height** and set the container to `[scroll]` to allow users to access additional items. ```jsx withPreview @@ -1161,19 +474,11 @@ For submenus containing a large number of links, define a max-height and set the --- -## Accessibility - -### Keyboard controls - -A Navigation Menu shows/hides without delay when the trigger is in focus and space/enter is selected on the keyboard. If the Navigation Menu is open and either shift+tab, or tab, is selected on the keyboard it will move focus to the next focusable element. When esc is selected on the keyboard, it will close the Navigation Menu and move the focus to the trigger. - ---- - ## Guidance ### Number of menu items -For primary navigation, the maximum number of menu links recommended is eight (8). If your use case requires more than 8 menu links, re-evaluate your navigation hierarchy to make use of submenus, or consider using a different component. +For primary navigation, the maximum number of menu links recommended is **eight (8)**. If your use case requires more than 8 menu links, re-evaluate your navigation hierarchy to make use of submenus, or consider using a different component. ```jsx withPreview isGuide="error" demoHeight="350" @@ -1214,48 +519,14 @@ For primary navigation, the maximum number of menu links recommended is eight (8 ``` -### Avoid non-wayfinding content +--- -A navigation menu is primarily reserved for links. It is not meant to communicate significant amounts of freeform or non-wayfinding content; consider a [Popover](/components/popover) or [Tooltip](/components/tooltip) instead. +## Accessibility -```jsx withPreview isGuide="error" demoHeight="350" - - - - - - {`See details`} - - - - - -

- The texture of a Honeycrisp Apple is no accident: Its cells have - been bred to be bigger than cells in other apples, making the fruit - feel juicier and crunchier than its competitors. These cells explode - as your teeth tear into them. Then there's its distinct flavor — a - clean, clarified sweetness that's almost frosty. - {`Learn more`} -

- - - - - -``` +### Keyboard navigation + +When navigation menu is in focus, links can be traversed using **left**, **right**, **up** and **down** arrow keys, or **tab** / **shift+tab**. Pressing the **enter** key executes a click function, which will navigate the user to the selected link. +Links containing a submenu can be accessed by focusing the link and pressing **space** bar to toggle display of the submenu. Pressing the **esc** key exits the submenu and moves focus back to the parent link / trigger. ---