Try ShortPoint now

How can we help you today?

Details

How to Create a SharePoint Page with a Side Navigation Menu Using the Code Design Element

Modified on: Mon, 19 May, 2025 at 12:25 PM

This article will demonstrate how to create a SharePoint page with a functional side navigation menu using the Code Design Element:


sample page with side navigation

TABLE OF CONTENTS

Prerequisites

  • You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.
  • Make sure you already have a blank SharePoint page.

Step-by-step Tutorial

Follow the steps below to learn how to create a side navigation menu:


Step 1: Edit the SharePoint Page

Go to the blank SharePoint page you want to use and click Edit:


Edit


Close the Toolbox:


close icon

Step 2: Add a Full-width SharePoint Section


NOTEYou can use any other type of SharePoint Section. However, for the best outcome, we recommend using the Full-width SharePoint Section.


Click the green plus icon to add a new Section:


green plus icon


Select Full-width section:


Full-width Section

Step 3: Add the ShortPoint Web Part

Click the ShortPoint icon:


ShortPoint icon


Select the Choose Layout icon:


Choose layout icon


Choose the single row layout:


single row layout

Step 4: Insert the Code Design Element

Click the pink plus icon to open the library of Design Elements:


pink plus icon


Use the search bar to look for Code and select it:


code

Step 5: Disable Sandbox Mode

Go to the [1] Design tab and [2] disable Sandbox Mode:


Design tab and sandbox mode


NOTEMake sure not to skip this step. Otherwise, the codes will not work as expected.

Step 6: Copy and Paste the HTML Code

Copy the HTML Code below:

<div id="body">
  <div class="container">
  <nav class="sidebar">
    <div class="sidebar-title">Quick Links</div>
    <div class="sidebar-list" id="sidebar-list"></div>
  </nav>
  <main class="main-content">
    <iframe id="main-iframe" src=""></iframe>
  </main>
  </div>
</div>
NOTEYou can modify the side-bar-title value according to your preferences. For example, instead of Quick Links, you can write the name of your company: <div class="sidebar-title">Brightworks</div>


Go back to the Content tab:


Content tab


Paste the HTML code in the HTML field:


paste html

Step 7: Copy, Modify, and Paste the CSS Code

Copy the CSS code:

#CommentsWrapper {
  display: none !important;
}
#body {
  background: #f4f8fb;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 10px 10px;
  padding: 0;
}
.container {
  display: flex;
  width: 100%;
  height: calc(100vh - 230px);
  box-shadow: 0 8px 32px rgba(0, 60, 180, 0.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.sidebar {
  width: 250px;
  background: linear-gradient(135deg, #00174a 0%, #1e40af 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  box-sizing: border-box;
}
.sidebar-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: 1px;
}
.sidebar-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  font-size: 1.1rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  border-radius: 0 24px 24px 0;
  outline: none;
}
.sidebar-btn .icon {
  font-size: 1.3em;
  width: 24px;
  text-align: center;
}

.sidebar-btn:hover {
  background: #359FE570 !important;
  color: #ffff;
}

.sidebar-btn.active {
  background: #359FE570;
  border-left: 4px solid #60a5fa;
  color: #ffff;
}
.main-content {
  flex: 1;
  background: #f1f5fa;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}
.main-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 18px 18px 0;
  background: #fff;
  box-shadow: 0 0 0 1px #e0e7ef;
}
@media (max-width: 900px) {
  .container {
    flex-direction: column;
    height: auto;
    min-height: 600px;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    border-radius: 18px 18px 0 0;
  }
  .sidebar-list {
    flex-direction: row;
    gap: 0;
    width: 100%;
  }
  .sidebar-btn {
    flex: 1;
    justify-content: center;
    border-left: none;
    border-bottom: 4px solid transparent;
    border-radius: 0 0 24px 24px;
    padding: 16px 0;
  }
  .sidebar-btn.active,
  .sidebar-btn:hover {
    border-left: none;
    border-bottom: 4px solid #60a5fa;
  }
  .main-content iframe {
    border-radius: 0 0 18px 18px;
  }
}

Modify it according to your preferences. Below is a list of properties you can customize:

NOTENot all properties are listed below. We only listed the properties that we think are best to customize. However, you can modify any property you want.


#body

font-familyfont-family
allows you to change the font used.


.container

widthwidthallows you to set the width of the container.
heightheightallows you to modify the height of the container.
box-shadowbox-shadow
allows you to modify the shadow around the container.
border-radiusborder-radius
allows you to change the roundness value of the container’s corners.


.sidebar

widthwidthallows you to modify the width of the sidebar.
backgroundbackground
allows you to change the background color of the sidebar.
colorcolorallows you to modify the color of the text inside the sidebar.


.sidebar-btn:hover

backgroundbackgroundallows you to specify the background color of the items in the sidebar when you hover over them.
colorcolor
allows you to specify the text color of the items in the sidebar when you hover over them.


.sidebar-btn.active {

backgroundbackgroundallows you to specify the background color of the active item in the sidebar.
colorcolorallows you to specify the text color of the active item in the sidebar.


Paste the modified CSS code in the CSS field:


paste in CSS

Step 8: Copy, Modify, and Paste the JavaScript Code

Copy the JavaScript Code:

const links = [
  {
    icon: "shortpoint-icon shortpoint-icon-fa-home",
    title: "Home", 
    url: "https://en.wikipedia.org/wiki/Main_Page"
  },
  {
    icon: "shortpoint-icon shortpoint-icon-fa-compass",
    title: "Wiki",
    url: "https://en.wikipedia.org/wiki/OpenAI"
  },
  {
    icon: "shortpoint-icon shortpoint-icon-fa-envelope-o",
    title: "Contact",
    url: "https://en.wikipedia.org/wiki/Google"
  },
];

const sidebarList = document.getElementById('sidebar-list');
const iframe = document.getElementById('main-iframe');

let currentIndex = 0;

function renderSidebar() {
  sidebarList.innerHTML = '';
  links.forEach((item, idx) => {
    const btn = document.createElement('button');
    btn.className = 'sidebar-btn' + (idx === currentIndex ? ' active' : '');
    btn.innerHTML = `
          <i style="font-family: FontAwesome !important" class="icon ${item.icon}"></i>
          <span>${item.title}</span>
        `;
    btn.addEventListener('click', () => {
      if (currentIndex !== idx) {
        currentIndex = idx;
        updateActive();
        iframe.src = item.url;
      }
    });
    sidebarList.appendChild(btn);
  });
}

function updateActive() {
  Array.from(sidebarList.children).forEach((btn, idx) => {
    btn.classList.toggle('active', idx === currentIndex);
  });
}

// Initial render
renderSidebar();
iframe.src = links[0].url;

Modify the line of code below:


  {

    icon: "shortpoint-icon shortpoint-icon-fa-home",

    title: "Home", 

    url: "https://en.wikipedia.org/wiki/Main_Page"

  },


iconiconchange to the icon you want to use. You can go to fontawesome for a list of icons you can use.
titletitlewrite the title you prefer.
urlURLpaste the link of the page / file you want to showcase. Take note that not all URLs can be embedded. It is best to use URLs that belong to the same domain as the page you created this viewer.


NOTEIf you wish to add more than three items in the side navigation, simply add the same line of code below the last item and modify it according to your needs.


Here’s an example of a modified JavaScript code for your reference:

const links = [
  {
    icon: "shortpoint-icon shortpoint-icon-fa-globe",
    title: "Home", 
    url: "https://your.sharepoint.com/"
  },
  {
    icon: "shortpoint-icon shortpoint-icon-fa-bullhorn",
    title: "Sales",
    url: "https://your.sharepoint.com/sites/Sales"
  },
  {
    icon: "shortpoint-icon shortpoint-icon-fa-newspaper-o",
    title: "Content",
    url: "https://your.sharepoint.com/sites/Content"
  },
  {
    icon: "shortpoint-icon shortpoint-icon-fa-key",
    title: "Security",
    url: "https://your.sharepoint.com/:b:/s/MarketingMaterials/EeJmH9cKcBNHhIBLkXCVs4YBs6AqL3CB2RLTNG_1e3zoBw?e=iz5u3N"
  },
];

const sidebarList = document.getElementById('sidebar-list');
const iframe = document.getElementById('main-iframe');

let currentIndex = 0;

function renderSidebar() {
  sidebarList.innerHTML = '';
  links.forEach((item, idx) => {
    const btn = document.createElement('button');
    btn.className = 'sidebar-btn' + (idx === currentIndex ? ' active' : '');
    btn.innerHTML = `
          <i style="font-family: FontAwesome !important" class="icon ${item.icon}"></i>
          <span>${item.title}</span>
        `;
    btn.addEventListener('click', () => {
      if (currentIndex !== idx) {
        currentIndex = idx;
        updateActive();
        iframe.src = item.url;
      }
    });
    sidebarList.appendChild(btn);
  });
}

function updateActive() {
  Array.from(sidebarList.children).forEach((btn, idx) => {
    btn.classList.toggle('active', idx === currentIndex);
  });
}

// Initial render
renderSidebar();
iframe.src = links[0].url;

Paste the modified code in the JavaScript field:

paste in JavaScript

Step 9: Save and Publish

Once satisfied, Apply your changes:


apply


Click the eye icon to see your page in real-time:


eye icon


Click Save to keep your changes:


Save


Publish your page:


publish


TIP: For a cleaner look, you can use Theme Builder to hide the header of your SharePoint page. To do it, open Theme Builder > go to General Settings > Elements > All Sites > Enable Focus Mode and Hide Header > Publish.

hide header


Congratulations! You’ve successfully created a SharePoint Page with a functional Side Navigation Menu using the Code Design Element.


sample page with side navigation

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Visit our dedicated courses on ShortPoint Academy

Click Here!

World's best intranet sites are designed using ShortPoint

Get started today! Learn more

Visit our dedicated courses on ShortPoint Academy

Click Here!
See all 87 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more