menu

Side Menu

A beautifully customizable menu that slides out from either side of the page
01
sort DEFAULT
sort CUSTOM

Menu Types

WIth Side Menu, you aren't limited to the method that you use to make your menu. You can use a RapidWeaver menu, or create your own using 3 different custom options.

arrow_back
Examples
View Tutorial

RapidWeaver Menu

By Default Side Menu uses your RapidWeaver sites' menu. No setup, simply drag and drop.

Custom Menus

We've also included the ability to create custom menus using 3 different methods. You can create menus with Markdown, HTML, or even with Stacks controls!

text_format
Markdown
code
HTML
gamepad
STACKS
- [Link Text] (http://customlink.com)
- [Link Text] (http://customlink.com)
- [Link Text] (http://customlink.com)
   - [Sub link] (http://customlink.com)
   - [Sub link] (http://customlink.com)
   - [Sub link] (http://customlink.com)
<ul>
  <li>
    <a href='#'>Top Level</a>
  </li>
  <li>
    <a href='#'>Top Level</a>
    <ul>
      <li><a href='#'>Sub Link</a></li>
      <li><a href='#'>Sub Link</a></li>
    </ul>
  </li>
</ul>
home
Add link text here
Add link subtitle text here
directions_boat
Add link text here
Add link subtitle text here
directions_bike
Sub-level link text
Sub-level subtitle text
add
02
arrow_back
arrow_forward

Menu Positioning

As any side positioned menu should, Side Menu supports the ability to horizontally position itself either side of the page.

arrow_back
Examples
View Tutorial

You choose, left or right

With the simple change of one setting you can position your menu to the left or to the right of the screen. You could even create two menus, one on each side for a double menu affect!

Position Left
Stays inline with content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Position right
Stays inline with content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

03
list EXAMPLE

list icons & subtitles

Regular old menus are boring and not very descriptive. Let your users know what they can expect on each page with visual icons and descriptive subtitles.

arrow_back
Example
View Tutorial

List Icons

Add list icons to your menu items giving your users a visual idea of what each page is about. Using the stacks custom menu controls adding list icons to your menu is as simple as checking an option.

  • home
    Home page
  • info
    About page
  • contact_mail
    Conact page

Subtitles

If Icons aren't enough, you can even add subtitles to your menu items, providing a short explanation of what the page is about.

  • home
    Home page
    This an example of subtitle text
  • info
    About page
    This an example of subtitle text
  • contact_mail
    Conact page
    This an example of subtitle text
04
favorite
local_dining
nature_people
filter_vintage

Menu Styles

Side Menu supports a huge variety of customization options from backgrounds, colors, icons, sizing and more. The possibilities are truly endless!

arrow_back
Examples
View Tutorial
Overlay
  • opacity
    Opacity Control
  • color_lens
    Color Backgrounds
  • image
    Image Backgrounds
  • gradient
    Gradient Backgrounds
Menu Links
  • color_lens
    Link Colors
  • crop_free
    Radius Control
  • format_line_spacing
    Padding & Spacing
  • color_lens
    image
    gradient
    Backgrounds
Close button
  • color_lens
    Color
  • texture
    Background
  • crop_free
    Radius Control
  • arrow_back
    Custom Close Icon
Dropdown Icons
  • format_size
    Sizing
  • color_lens
    Colors
  • add_circle_outline
    highlight_off
     Open & Close Icons
Text Alignment
  • format_align_left
    Left Align
  • format_align_right
    Right Align
  • format_align_center
    Center Align
Responsive Hide
  • smartphone
    Hide on phones
  • tablet
    Hide on tablets
  • desktop_windows
    Hide on desktops
And More...
05
sort Header
sort Footer
arrow_back

Menu Footer & Header

If adding custom menu items isn't enough, we've also included custom header and footer sections! Make your menu even more powerful with extra content.

arrow_back
Examples
View Tutorial
library_add
Drop Stacks Here

Add any content you like

Both the head and footer section are simple stack areas where you can drop any stack you can imagine.

Add social icons, an email subscription form, or other important content that you want your users to notice.

Turn sections on & off

The Header and footer sections are completely optional. If you don't want to use one, or either, you can easily toggle them on or off.

indeterminate_check_box
ON
check_box_outline_blank
OFF
07
border_left
border_vertical
border_right

Toggle - Positioning

Every website is different, and we want you to be able to place your menu toggle right where you need it.

arrow_back
Example
View Tutorial
Inline
Stays inline with content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Fixed
Scrolls with Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Nunc ut sem vitae commodo risus tristique posuere.

MENU

Toggle Alignment

Alignment works with both inline and fixed positioning. This allows you to create all sorts of menu toggle configurations on your page.

Left
MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Center
MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

Right
MENU

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros

08
filter_3 Menu
pets MENU
edit
translate

Toggle - Styles

Not only are there tons of customizablity options for the menu itself, but the menu toggle is also fully customizable with an unlimited number of possibilities! Try the examples~

arrow_back
Examples
View Tutorial
1000+ Icons
  • opacity
    Google Material Icons
  • color_lens
    Fontawesome Icons
  • image
    Ionic Icons
  • format_size
    Customizable Icon Sizing
Toggle Backgrounds
  • color_lens
    Color Backgrounds
  • image
    Image Backgrounds
  • gradient
    Gradient Backgrounds
  • star
    Change Hover States too!
Toggle Text
  • text_format
    Customizable Text
  • color_lens
    Color Options
  • format_size
    Sizing Options
  • font_download
    Included Font Families
Sizing & Spacing
  • crop_free
    Radius Control
  • format_line_spacing
    Padding & Spacing
Borders
  • crop_free
    Border thickness, style, size
  • blur_on
    Box Shadow Options
More...
09

Extra Toggles

You aren't limited to having a single toggle for your Side Menu. You can easily add additional toggles, and even links that will open the menu.

arrow_back
Example
View Tutorial

Included Extra-toggle stack

We've included a Side Menu Extra Toggle stack, that will allow you to create more menu toggles on your page.

The Extra Toggle stack has all of the styling and customization options mentioned above!

Bonus Tip!

You can even use a basic link to toggle your menu by adding the following attribute to a link tag:

data-id="side_menu_UNIQUE_MENU_ID"


Just replace the UNIQUE_MENU_ID with your Side Menus id value! Awesome~~

Here are some examples:

Click this link to open the Main Menu Click this link to open the Heart Menu
Get it now