Menu Links

Before you create your Menu Links, you might find it helpful to plan out what types of links you want to add to Aspen.

Consider the real estate that you have available in Aspen to add links. If you add too many Menu Links along the top, they will start to wrap around and start stacking. This isn't ideal and doesn't look great on all screen sizes. It also stacks the login link, which can be confusing to users.

Menu Links all at the Top on a Standard Width Header (not ideal)

Menu Links all at the Top on a Full Width Header (could be better)

When planning your Menu Links, think about:

• Can Menu Links be combined into categories to create dropdown menus?
• Do all of my Menu Links need to be above the search bar, or can I put some links in the side hamburger menu instead? (Example: About Us, Contact Us, Help, Mission Statement, Library Policies, Staff Directory, etc. are all good candidates for the side menu)
• Can my Menu Link labels use less words to convey the same message? (Example: "Resources" vs. "Electronic Resources & Databases")
• Would switching to a full-width header and footer give me more space for menu links? (To adjust this, go into Aspen Administration > Theme & Layout > Themes > click into my theme > check Make Header & Footer Full Width)

Menu Links Using Condensed Language and Moving a Link to the Side (great use of space!)

Create Menu Links

1. Head to Aspen Administration → Primary Configuration → Library Systems.
2. Click into the library system setting you’d like to create Menu Links for and scroll down to the Menu Links section.
3. Clicking Add New will populate empty link fields where your link information will go.

Single Menu Link

1. To create a single menu link, give the link a name in the Category field.
2. You’ll use this same name in the Link Text field.
3. To include an icon next to your link, click on the information circle next to the the FontAwesome Icon Name and paste the icon name in that column. Learn more about Font Awesome and commonly used icons here.
4. Specify a URL for your link in the URL field.

• If you’re linking to another page created with Aspen's Web Builder, you can simply use the URL alias (ex: /help, /home, /events) and Aspen will know to pull up the page within Aspen.

How the single Menu Link shows in Aspen:

How the set up looks in Library Systems settings:

Nested Links / Drop Down Menu Links

1. To create a set of nested links aka a drop down menu, you’ll first decide the name of the menu Category. This is the text that will become the header of your menu link.
2. Next, add one line for for each link in your menu copying down the exact same Category name. This is how Aspen knows to group these links together.

In this example, the Category is 'Education' and the Link Text fields contain 'Articles', 'Videos' and 'Admin videos'

How the single drop down menu shows in Aspen:

How the set up looks in Library Systems settings:

To add Menu Links across the top of the search bar, you must select Show in Top Menu and/or Show Icon in Top Menu.

If you leave both of these deselected and the Menu Link is checked as Published? then the Menu Link will automatically move into the side hamburger menu instead of along the top of the search bar. 

Mobile view begins at under 1200px.

Show in Top Menu (Large Screens Only)

If checked, then the top icon will remain in mobile view and the link labels will be collapsed.

Show Icon in Top Menu (All Screen Sizes)

If also checked, then the top icons will move to the side hamburger menu in mobile view.

In this screenshot the Education category moved from the top to the side menu in mobile view.

In the URL field, you can either enter:

• An entire URL. This must contain the https:// Example: https://help.aspendiscovery.org
• If linking to a Web Builder page or other area of Aspen (lists, account, self registration, etc.), you can use the URL alias after the domain. Example: /help/admin/menulinks

Click here to read about linking to various areas of Aspen.

Move Menu Links

There are two options for menu link placement: along the top menu bar, and within the hamburger menu.

Top Menu

1. Visit Primary Configuration → Library Systems, then scroll down to view your existing menu links.
2. Use the scroll bar to scroll over to the right. You'll see several columns of checkboxes for additional options.
3. To display your menu link in the top menu, check one or both of these options:

Hamburger Menu

1. To display your menu link in the hamburger menu, leave the two "Top Menu" options unchecked.
2. To display a set of nested links in the hamburger menu, click "Show Expanded" to have all links within a link category show at once. Otherwise, users will need to click the link header to expand the nested links.

Menu Links show top to bottom, left to right in the chart. To move menu links, use the sort areas to change the order of the links. You can do this for the main categories as well as the nested menu links.

As of the 24.01 release, staff can now copy menu links to other catalogs on the server.

To copy menu links, click into the Library System of the catalog that already has menu links set up.

At the bottom right hand corner of the table you should see a Copy Menu Links button.

Note: You would need permissions to add menu links in order to see this button.

Note: This functionality is to copy menu links to other Library Sysems aka Library Catalogs. If you don't have another Library System to copy this to, you may see the button but when you click on it, you will receive an error.

When you click on Copy Menu Links, a pop up will give you some information on what menu links are available to be copied and which libraries they are able to be copied to.

Staff can select/deselect as they wish. 

Once Copy is clicked, the changes will be applied immediately.

You'll want to go check the other Library System/Library Catalog you copied the menu links to and make sure the links look correct and are in the order that you want.

By default, menu links will show on your Aspen Discovery catalog only. If your library uses the Aspen LiDA app, you can choose whether a link appears in both Discovery and LiDA, or in LiDA only.

Menu links that are added to LiDA will show up in the "More" section of the app menu bar at the bottom of the screen.

Note that FontAwesome icons do not carry over to the display in LiDA, only the link text.

When clicked, menu links will open up in a new browser window on the mobile device.

Menu Links can be configured per language translation on the Aspen catalog.

If a library has Menu Links that highlight or promote speciifc resources to users in another language, Aspen will only show that link to users when they are in that specific language translation of the catalog.

To see how the Menu Links are configured, navigate to Aspen Administration > Primary Configuration > Library Systems > click into the Library System > scroll to Menu Links or search Menu Links at the top > Click on Edit 

Once you click Edit, look in Languages to see all the language translations that Menu Link is showing on.

The icons used in menu links come from Font Awesome: https://fontawesome.com/v5/search?o=r&m=free&s=solid 

Aspen currently supports Font Awesome version 5.15.4

When you find an icon you want, type the word exactly as it is into Aspen.

If you click onto the image, you can also copy the word from the modal by copy and pasting or clicking on the link icon to copy the word and then pasting into Aspen.

Here are some popular icon codes used on Aspen library catalogs with the type of link they typically correspond to. Just copy and paste the word to have the icon appear in Aspen.

Sign Up for a Library Card

• address-card
• barcode
• id-card

General Library

• book
• bookmark
• book-open
• book-reader

General Information

• info
• info-circle

eCommerce

• credit-card
• donate
• money-bill
• money-bill-alt

eResources

• desktop
• laptop-code
• tv

Events

• calendar
• calendar-alt

History and Archives

• archive
• history
• hotel
• landmark
• newspaper
• university

Library Website Homepage

• home
• school

Lists

• list-alt

Services

• hand-sparkles

Tutorials/Help

• question
• question-circle
• video