wix-style-react
Version:
wix-style-react
88 lines (72 loc) • 6.75 kB
Markdown
# SideMenu DrillView
An N-Level menu drill view component showing a single menu at a time with a slide animation to/from sub menus.
The menus are rendered using the SideMenu design.
## Usage
```html
<SideMenuDrill>
<SideMenu.Header>
<h2>My Application</h2>
</SideMenu.Header>
<SideMenuDrill.Link><a onClick={doSomething()}>Link #1</a></SideMenuDrill.Link>
<SideMenuDrill.Link><a href="//wix.com">Link #2</a></SideMenuDrill.Link>
<SideMenuDrill.SubMenu menuKey="SUB_MENU_1" title="Sub Menu #1">
<SideMenu.Header>
<h2>My Internal Application</h2>
</SideMenu.Header>
<SideMenuDrill.Navigation>
<SideMenuDrill.Link><a onClick={doSomething()}>Link #3</a></SideMenuDrill.Link>
<SideMenuDrill.Link><a href="//wix.com">Link #4</a></SideMenuDrill.Link>
</SideMenuDrill.Navigation>
</SideMenuDrill.SubMenu>
<SideMenuDrill.SubMenu menuKey="SUB_MENU_2" title="Sub Menu #2">
<SideMenuDrill.Navigation>
<SideMenuDrill.Link><a onClick={doSomething()}>Link #5</a></SideMenuDrill.Link>
<SideMenuDrill.Link><a href="//wix.com">Link #6</a></SideMenuDrill.Link>
<SideMenuDrill.SubMenu menuKey="SUB_MENU_3" title="Sub Menu #3">
<SideMenuDrill.Navigation>
<SideMenuDrill.Link><a onClick={doSomething()}>Link #7</a></SideMenuDrill.Link>
<SideMenuDrill.Link><a href="//wix.com">Link #8</a></SideMenuDrill.Link>
</SideMenuDrill.Navigation>
</SideMenuDrill.SubMenu>
</SideMenuDrill.Navigation>
</SideMenuDrill.SubMenu>
</SideMenuDrill>
```
The DrillView renders the menu of the `Link` marked with `isActive`, otherwise it will render the root menu.
In order to change the displayed menu you need to change the `isActive` flag of the new active `Link` and the DrillView menu will update accordingly.
Make sure that you only have a single `Link` marked with `isActive` at all times, otherwise the behaviour is unexpected.
You can render as many `SubMenu`s as you wish! Each `SubMenu` can have a `SideMenu.Header`, `SideMenu.Promotion`, `SideMenu.Footer` or any other custom item.
Make sure you wrap the internal `Link`s and `SubMenu`s with a `Navigation` component!
## Props
| propName | propType | defaultValue | isRequired | description |
| - | - | - | - | - |
| menuKey | string | root | - | A unique key for the menu. |
| inFlex | bool | false | - | Is in flex container (different styling to handle a Safari bug). |
| children | node | - | - | A list of navigation items of types `SideMenuDrill.Link`, `SideMenuDrill.SubMenu`. |
| stickyFooter | node | - | - | Render a stickyFooter which will retain it's position even when drilling down. |
## Components
### Link `<SideMenuDrill.Link/>`
Main navigation item. Make sure you have zero or one Link active at all times.
The children can be any node, but must contain an `anchor` element for the correct style to kick in.
| propName | propType | defaultValue | isRequired | description |
| - | - | - | - | - |
| isActive | bool | false | - | Slightly different styling for hover (e.g. no background transition) |
| children | node | - | - | - |
| disabled | node | - | - | Link will be disabled without effects or pointer events - |
| ...rest | * | - | - | Any other prop will be added to root element (e.g. `onClick`, `onMouseEnter` etc.) |
### SubMenu `<SideMenuDrill.SubMenu/>`
A container of sub navigation items.
The first `Link` in a `Submenu` must have an `onClick` property (since clicking the submenu passes the click to the first child)
| propName | propType | defaultValue | isRequired | description |
| - | - | - | - | - |
| menuKey | `string` or `node` | - | true | A unique key for the menu |
| title | string | - | true | The sub menu's title |
| isActive | bool | false | - | slightly different styling to indicate active link (closed mode only) |
| isOpen | bool | false | - | when set to `false` the sub menu will appear like a `Link`, otherwise it will render the sub navigation |
| onSelectHandler | func | noop | - | A callback to call when the sub menu anchor is clicked |
| onBackHandler | func | noop | - | A callback to call when the sub menu back button is clicked |
| backLabel | node | Back | - | The text that will be displayed on the back link |
| showCategory | bool | true | - | Show a category title in the submenu view |
| withBadge | bool | false | - | Show a badge next to the closed SubMenu link |
| linkDataHook | string | menu-drill-sub-menu-link | - | Set the data-hook value of the link |
| children | node | - | true | A list of child nodes including `SideMenu.Navigation` containing more links & sub menus |