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.