Add Custom Links to the


Doug Eriksen (Seattle University)
Documentation updated for Primo VE by Carlos Torres (Seattle University)


This procedure allows you to insert custom links at the bottom of the drop-down menu in the upper right-hand corner of your Primo pages.

Custom eShelf Links

System Components

Alma Discovery Configure Views

Skillset Requirements

Alma Discovery Configure Views, JS, and CSS


Not tested for accessibility. The code does put the “aria-label” into the declaration, so it should have the same accessibility as the rest of that menu.

Browser Support

Tested on Firefox, Chrome, Safari, on Mac, and the new Chrome-based Edge on Windows.



To enable this module, you will need to:

  • Declare the directive and options in your custom.js file
  • Style the button in your custom1.css file


  1. Turn on inheritance from the Central Package.
  2. In your local package, in the custom.js file, include the module ‘eShelfLinks’ in your app definition. For example:

    var app = angular.module('viewCustom', ['eShelfLinks']);

  3. Also in the custom.js file, insert the code below and customize with your links:

    app.value('eShelfOptions', {
      items: [
          text: "COCC Library",
          label: "COCC Library",
          link: "",
          icon: "content:ic_link_24px"

  4. In your custom1.css file, insert the following:

    /* link customizations */
    padding-bottom: 0px;
    padding-top: 5px;

    a.custom-link:hover {
    text-decoration: none;
    background-color: unset;
    box-shadow: none;

    custom-directive md-icon {
    opacity: 0.5;

  5. Zip and upload your package in Alma Discovery. Save your view.