Menu Component
The Menu component lets you easily add a navigation menu to your pages. You can include both internal links to other sections of your content and external links. The goal is to create a clear and consistent navigation structure that connects your different resources. This allows your readers to move quickly from one page to another or access relevant external content effortlessly and without losing their way. In short, the Menu component significantly simplifies the browsing experience for your users.
Usage & Properties of the Menu Component
| Parametres |
Values |
| theme |
primary-theme orange-theme green-theme
red-theme blue-theme purple-theme gris-theme
olive-theme gold-theme strawberry-theme
indigo-theme sky-theme yellow-theme
|
| box_type |
mini-box container-box container-view
container-large container-full
|
| font |
serif-font-heading serif-font-global sans-serif-font-heading
sans-serif-font-global
|
| mode |
mode-classic-menu mode-simple-menu mode-block-menu
mode-icon-menu mode-cover-menu
|
| cover |
Custom URL for an image |
Menu Component in action
Menu component : Classic Mode
:: menu{id="" theme="primary-theme" mode="mode-classic-menu" font="sans-serif-font-heading" box_type="container-box"}
:- link{url="/" target="_blank" text="Home"} :- link
:- link{url="/about/" target="_blank" text="About"} :- link
:- link{url="/contact/" target="_blank" text="Contact Us"} :- link
:: menu
Menu component : Simple Mode
:: menu{id="" theme="primary-theme" mode="mode-simple-menu" font="sans-serif-font-heading" box_type="container-box"}
:- link{url="/" target="_blank" text="Home"} :- link
:- link{url="/about/" target="_blank" text="About"} :- link
:- link{url="/contact/" target="_blank" text="Contact Us"} :- link
:: menu
Menu component : Block Mode
:: menu{id="" theme="purple-theme" mode="mode-block-menu" font="sans-serif-font-heading" box_type="container-box"}
:- link{url="/" target="_blank" text="Home" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"} :- link
:- link{url="/about/" target="_blank" text="About" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"} :- link
:- link{url="/contact/" target="_blank" text="Contact Us" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"} :- link
:: menu
Menu component : Icon Mode
:: menu{id="" theme="green-theme" mode="mode-icon-menu" font="sans-serif-font-heading" box_type="container-box"}
:- link{url="/" target="_blank" text="Home" icon="home"} :- link
:- link{url="/about/" target="_blank" text="About" icon="info"} :- link
:- link{url="/contact/" target="_blank" text="Contact Us" icon="network"} :- link
:: menu
Menu component : Cover Mode
:: menu{id="" theme="blue-theme" mode="mode-cover-menu" font="sans-serif-font-heading" box_type="container-box" cover="/static/images/cover-vertical-2.jpg"}
:- link{url="/" target="_blank" text="Home"} :- link
:- link{url="/about/" target="_blank" text="About"} :- link
:- link{url="/contact/" target="_blank" text="Contact Us"} :- link
:: menu
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
