Start here
Editing and styles
Media and content
Tutorials
Site and publishing
Layout and navigation
Forms and services
Add a Menu to turn the site’s pages and page groups into navigation. Use Auto-Add Pages when it should follow the page list, or build and link the items yourself.
When first added to the canvas of a new, empty site, it has a default appearance like this.
It’s a single button with the name Home in it, signifying that it is a link to the home page of the site. As new pages are added to the site, the menu grows to include the new pages as and when they are added, this is the default behaviour of the menu element. It’s important to note that these are known as ‘top-level’ links and one link will be created for each top level page added to the site. If, however, a PAGE GROUP is added to the site, the link will become a PAGE GROUP link and pages added to the PAGE GROUP will become submenu items of the PAGE GROUP link. Here is an example of a menu with one home page, and a PAGE GROUP with two pages within the Page Group.
When adding page groups to a website, the page group link won’t actually go to a physical page when it’s clicked. Instead, it will open the drop-down to display the pages within that group. By way of practical example, assume we want a simple website comprising a Home page, an About Us page, a Products group with two pages, one for Smartphones and one for Tablet Devices. We may also want a Contact Us page. To have Sitely automatically create this menu for us, all we need to do is add the pages and groups in the Pages panel on the left of the Sitely Interface. When adding Top level pages, click the ‘+’ icon at the foot of the pages panel and choose Top Level from the Drop-down selector next to Add Page.
To add a new PAGE GROUP, click the Add Page Group button. This will create a new page group with no pages. Once a page group is created, you can rename it in the pages panel on the left of the screen, just click on the group name and rename it, in our example, Products.
You can now add the two product pages for Smartphones and Tablet Devices by clicking the ‘+’ icon at the foot of the pages panel, and choosing ‘Products’ in the dropdown selector next to the Add Page button. You can rename actual pages in the same way as you renamed the group, just click on the page name and change it to one you want. Alternatively, you can select the pages one by one, and set the page name in the Pages tab over on the right of the screen.
With your pages and page groups correctly named, you can now add the menu element to your home page. It will look something like this.
What Sitely has done is gathered up your page and group names and created the menu for you. Furthermore, if you create additional pages and/or groups later on, they can be automatically added to the menu as you build your site. Just be sure that the Auto Add Pages box is checked in the style panel. The option becomes visible in the style panel when you select the menu on the canvas.
Drag items in the Style inspector to change their order. Expand a page group to inspect its children. Choose a horizontal, vertical or compact layout. In a compact menu, the visitor opens the list from an icon or label.
This is the vertical menu
when collapsed
This is the vertical menu
when expanded
This is the compact menu option. The items are revealed when the icon is clicked
Having created a menu, Sitely allows you to decide where and on what devices it should be displayed. This is all done in the Arrange panel. With the menu selected on the canvas, pop over to the Arrange tab to see all the available options.
The Placement section allows you to choose to show the menu on the device you’re currently working on. Deselecting this option will hide the menu on the current device only, but keep it visible on other devices.
The Visibility section allows you to choose on which pages to show the menu. You can choose to Show on the current page only, all pages within the current page group, or Show on all pages in the site. You also have the option of having the menu Move with the page Bottom. This option is ideal if you have a menu of links in the footer section of your web pages, and you want to keep it glued to the bottom of the pages.
For most main site navigation, you would want your menu to be available on every page so that users can access it wherever they may be in your website. However, there may be situations where you want different menus to be available on different pages. These options give you complete control over this aspect of your website.
Choose the device layout, then set the menu’s orientation and submenu placement for that width. For example, use a horizontal menu on desktop and a compact menu on a phone. Preview the opened menu at the intended width, including its longest label and nested items.
Turn off Auto-Add Pages to manage the menu’s items independently of the page list. Use + to add an item and Item Label to name it. Use the folder control to add children under a parent item.
Select the parent or sibling at the level where the new item belongs, then add and reorder items. Use a top-level item for a main destination and children for its submenu. Remove a Home item if another control, such as your linked logo, already provides that route.
Select an item and choose its On Click action. Go to Page in This Website lets you select a page and an optional scroll location. Other actions can open a popup, control a gallery, or run another supported interaction.
Use a separate manual menu for navigation within a particular section of the site. Give each label a specific destination, and check the opened submenus in Preview. See Links for the available actions.
Just like everything else in Sitely, you can apply a whole range of styling options to your menus. All the styling options are found in Sitely’s familiar style panel. You can apply background colors, adjust fonts and sizes, add borders and corner rounding, and set text alignment. By applying different styling options you can create a text-only menu, one that looks like a series of buttons or tabs and apply mouse hover effects. Here are few examples.
Plain Text with Bottom
Border Highlight on Mouse Hover
Pill-Shape with color fill
on Mouse Hover
Tab Style with color change
on Mouse Hover
Button Style with color change
on Mouse Hover
In addition to the normal styling options, there are a few additional options that are specific to menus. Let’s take a look at those now.
The first option is the Same Size option. Selecting this checkbox will make all the menu links the same size. If this option is deselected, the links will be sized individually according to their text content. Here are the differences.
There is also an item spacing option that sets the amount of space between items in the menu.
Next up is the Submenu options. These can be set differently for different devices. The first option specifies the placement of the submenu items in relation to the top level links. These choices vary depending on the type of menu you’re working with. Here we see the options for a horizontal menu. The submenu links can be placed above, below, to the left or the right of the top level item. The small icons give you a graphical representation of each available option. This section also allows you to set item spacing as well as width and height of the submenu items.
The vertical menu options are much the same, but with different submenu placement options. Again, the small icons give you a graphical representation of how things are placed relative to the top level items.
If you’re working with a compact menu, you will see similar options, with a choice of horizontal or vertical placement of sub menu items. In the case of a compact menu, the top level item is the icon that triggers the menu when clicked.
The icon itself can be changed by selecting the menu item in the menu list in the style panel. If you don’t want to use an icon, you can simply have a text link. Just give the menu Item a label and remove the icon. Your Compact menu will then be a simple text link like this. When this link is clicked, the submenu items will appear.
Note: if you do intend to use an icon, be sure to delete the menu label in the style panel to prevent it displaying under or over your icon.
When creating a navigation structure for your websites, there are a few things you should consider, particularly if you want to make site navigation a pleasure for your users. This first thing is to consider is how your menu is presented to users. Wherever possible, try to wrap your menu into a Navigation Block that includes a logo, a background and any other general information that you may wish to present to users. In the example below, the menu is just one element within a navigation block.
It comprises a logo image which has an on-click action to go to the home page, a telephone number which has an on-click action to call the phone number, a solid background box, and the menu item itself with all its page links. These elements have been Grouped to make a single element that can be positioned on the page. Furthermore, as a grouped element it can be made to stick to the page top, keeping it visible to users as they scroll the page. You set this up by selecting the group on the canvas and then checking the Custom Scrolling option in the style panel. This will reveal the Stick to page top option.
Try to keep top level items to a minimum. Presenting too many choices as drop-down options can deter users from navigating your site further. Try and keep top level links to about five or six options, and if you do have drop-downs, try to keep the number of options to no more than four or five. If you simply must have users presented with a large number of options, maybe in an e-commerce site with many categories of products, consider creating a mega menu instead. This can be created in a Sitely Layout block or Pop-up which is set to become visible when a top level menu link is clicked. You see menus like this in many multi product group sites, such as the one illustrated below.
When creating drop-down links with a large number of items, have in mind that you will probably have to give a background to the drop-down links. If you leave them as transparent they may become difficult for users to read as the drop down will most likely cover other page elements when activated.
Place the navigation in a suitable header group or Layout Block and set its sticky behavior in Arrange. Hide when scrolling lets a sticky header retreat while the visitor scrolls down and return when they scroll back. Set the effect, duration and Scroll sensitivity for that behavior.
Preview opening a submenu before and after scrolling, then check that the header leaves enough room for the page content. See the sticky-menu tutorial and Layout Blocks.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 8
Powerful and refreshingly simple, at home on Mac, finding new freedom on iPad.
This website makes use of cookies.
Please see our privacy policy for details.