Mobile nav
Extended from Reka UI NavigationMenu
Basic example
The mobile nav can display a list of links. By default, it opens from the left.
Opening from the right
Using the from prop, you can set the mobile nav to open from the right.
Scrolling
Long lists of links are scrollable within the mobile nav.
Submenus
The mobile nav supports submenus down to any depth you want. Here is an example of a nav that goes two levels deep.
Custom items
You can insert custom items into the mobile nav that will appear just below the normal list of menu items.
Custom footer
You can specify a custom footer for the top level of the mobile nav (i.e. not submenus). It will automatically stick to the bottom of the mobile nav content pane.
Scrolling with custom footer
If the list of menu items becomes long enough to go beyond the bottom edge, the custom footer will scroll nicely along with the rest of the content pane.
EsMobileNav props
- Name
from
- Type
string
- Default
'left'
- Description
- Indicates whether the mobile nav should open from the left side of the viewport or the right. Can be 'left' or 'right'.
- Name
width
- Type
number
- Default
400
- Description
- On extra small breakpoint, the mobile nav takes up the full viewport width. On small breakpoint and above, the mobile nav will be set to this width and an overlay will appear beneath.
EsMobileNavTrigger props
- Name
unstyled
- Type
boolean
- Default
false
- Description
- Set to true to disable default trigger button styling and allow full customization. By default, the trigger button will have no background or border, dark blue text, padding, and a minimum height of 40px.
EsMobileNavLink props
- Name
href
- Type
string
- Default
- n/a
- Description
- Required. The URL for the link.
- Name
name
- Type
string
- Default
- n/a
- Description
- Required. The text to display.
- Name
target
- Type
string
- Default
'_self'
- Description
- Indicates whether the link should open in a new window or not. By default, the link will open in the same window. Pass '_blank' to open in a new window.
EsMobileSubNav props
- Name
name
- Type
string
- Default
- n/a
- Description
- Required. The name of the menu item that, when clicked, will drill down one level to show a different list of menu items. This name will also appear in the mobile nav header when that submenu is shown.