Menus

ShortcodesMenus

What’s this?

You can create a custom HTML menu or choose from a WordPress menu you have made. Check out the variations we’ve made to blend it with your site design. Examples below.

Stacked

Get code

[menu type="menu" menu="101" style="button-style-one" /]

Grouped

Get code

[menu type="menu" menu="101" style="button-style-one" grouped="1" /]

Inline

Get code

[menu type="menu" menu="101" style="button-style-one" layout="inline" /]

Inline and grouped

Get code

[menu type="menu" menu="101" style="button-style-one" grouped="1" layout="inline" /]

Stacked

Get code

[menu type="menu" menu="101" style="button-style-two" /]

Grouped

Get code

[menu type="menu" menu="101" style="button-style-two" grouped="1" /]

Inline

Get code

[menu type="menu" menu="101" style="button-style-two" layout="inline" /]

Inline and grouped

Get code

[menu type="menu" menu="101" style="button-style-two" grouped="1" layout="inline" /]

Stacked

Get code

[menu type="menu" menu="101" style="separator"]

Inline

Get code

[menu type="menu" menu="101" style="separator" layout="inline" /]

HTML menus

The previous menus use the WordPress menu, here you can add your own HTML

Get code

[menu style="button-style-one" layout="inline" grouped="1"]
[ul]
[li][a href="http://www.example.com"]Example[/a][/li]
[/ul]
[/menu]

Variations

Change the Skin for this Case Study

Demos

React Hub
Lens
Berri
Replika
Press
Second
View all Demos React Hub Copy current page content
[box type="custom-boxed-item" align="center" text_align="textcenter"] [fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header] You can create a custom HTML menu or choose from a WordPress menu you have made. Check out the variations we've made to blend it with your site design. Examples below. [icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"] [/box] [section_break type="blank" margin_bottom="30" /] [tabs layout="vertical" convert="cvt-phone-ldsp"] [tab title="Primary color"] [fancy_header bold="1" type="style1"]Stacked[/fancy_header] [menu type="menu" menu="101" style="button-style-one" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-one" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Grouped[/fancy_header] [menu type="menu" menu="101" style="button-style-one" grouped="1" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-one" grouped="1" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Inline[/fancy_header] [menu type="menu" menu="101" style="button-style-one" layout="inline" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-one" layout="inline" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Inline and grouped[/fancy_header] [menu type="menu" menu="101" style="button-style-one" grouped="1" layout="inline" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-one" grouped="1" layout="inline" /]
[/accordion_toggle] [/accordion] [/tab] [tab title="Light color"] [fancy_header bold="1" type="style1"]Stacked[/fancy_header] [menu type="menu" menu="101" style="button-style-two" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-two" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Grouped[/fancy_header] [menu type="menu" menu="101" style="button-style-two" grouped="1" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-two" grouped="1" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Inline[/fancy_header] [menu type="menu" menu="101" style="button-style-two" layout="inline" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-two" layout="inline" /]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Inline and grouped[/fancy_header] [menu type="menu" menu="101" style="button-style-two" grouped="1" layout="inline" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="button-style-two" grouped="1" layout="inline" /]
[/accordion_toggle] [/accordion] [/tab] [tab title="Link separator"] [fancy_header bold="1" type="style1"]Stacked[/fancy_header] [menu type="menu" menu="101" style="separator"] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="separator"]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Inline[/fancy_header] [menu type="menu" menu="101" style="separator" layout="inline" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu type="menu" menu="101" style="separator" layout="inline" /]
[/accordion_toggle] [/accordion] [/tab] [tab title="Custom HTML menu"] [fancy_header bold="1" type="style1" ]HTML menus[/fancy_header][h4]The previous menus use the WordPress menu, here you can add your own HTML[/h4] [menu style="button-style-one" layout="inline" grouped="1"] [ul] [li][a href="http://www.example.com"]Example[/a][/li] [li][a href="http://www.example.com"]Example[/a][/li] [/ul] [/menu] [accordion style="plain"] [accordion_toggle title="Get code"]
[menu style="button-style-one" layout="inline" grouped="1"]
[ul]
[li][a href="http://www.example.com"]Example[/a][/li]
[/ul]
[/menu]
[/accordion_toggle] [/accordion] [/tab] [/tabs]
Download - $44