# Pages Menu

## What is Pages Menu

Pages Menu is one of the web parts designed by intranet.ai to help companies **create a corporate knowledge base in SharePoint Online**. Creating a corporate knowledge base provides numerous benefits, such as **quick access to information**, **reduced time waste**, **standardized information**, **knowledge retention**, and **more effective collaboration**.

The Pages menu web part **displays the structure of a knowledge base in a clear way**. It shows the **contents of Site Pages** or a specific folder within Site Pages, showcasing **folders** first and then **pages**. It also offers the possibility to include internal and external **links**.

**Pages Menu** is essential for creating a well-organized knowledge base on SharePoint Online. For additional tools to enhance your knowledge base, refer to the manuals for [**In This Page**](https://docs.intranet.ai/sharepoint-intranet/components/in-this-page), [**Breadcrumb**](https://docs.intranet.ai/sharepoint-intranet/components/breadcrumb), and [**Contributors**](https://docs.intranet.ai/sharepoint-intranet/components/contributors).

{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Pages Menu** by [**clicking here** ](https://intranet.ai/features/pages-menu/)to learn more.
{% endhint %}

***

## Before you start: suggested knowledge base structure

Having a **well-structured and organized knowledge base** is essential for ensuring **easy navigation**, **quick access to information**, and an overall **better user experience**. A clear structure helps users find relevant content efficiently and makes maintaining and expanding the knowledge base more manageable over time.

We recommend adopting the following structure:

* Within the **Site Pages** library, create a folder named **SystemPages**.
* Inside **SystemPages**, create a subfolder for each **top-level section** of articles. For example, in a knowledge base called "Employee Knowledge Base", the top-level sections could be: "Employee Resources", "New Employee Orientation", and "Professional Development".

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FGgJAwdGlYReSX8RTI6Ch%2FBackend1.png?alt=media&#x26;token=16029053-c227-45ea-8846-de4b74a95355" alt=""><figcaption></figcaption></figure></div>

* Optionally, within each top-level section, create additional subfolders for **subsections**, such as:
  * "Employee Resources": "IT Tools and Support", "Policies and Guidelines";
  * "New Employee Orientation": "Company Overview", "First Week Checklist";
  * "Professional Development": "Career Growth", "Learning Opportunities".

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F80bFWjqYznWhK9ul9Us6%2FBackend2.png?alt=media&#x26;token=41b1d438-8e03-4fd1-bc33-528c2405093e" alt=""><figcaption></figcaption></figure></div>

* In each subsection, add individual **articles** (**SharePoint pages**) and any relevant **links**.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FeryIZQELYVo557W9lo4j%2FBackend3.png?alt=media&#x26;token=a38ccd8a-5997-444c-8901-ba64d14acc4d" alt=""><figcaption></figcaption></figure></div>

With Pages menu, a structure like this is displayed as follows:

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F0tj5Mv3X0ePdfxaT6BDs%2FPagesMenu.png?alt=media&#x26;token=8234ca24-f8ac-42f0-bed3-38fcab74dcfa" alt=""><figcaption></figcaption></figure></div>

By clicking on each link, the user can access the corresponding page.

***

## Add the Pages Menu web part to a SharePoint page

* If your page is not already in edit mode, click on **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part. You will see a line with a circled +, like this: <img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FccHplKgXfibd4tktmhas%252Fadvanced-search-2.png%3Falt%3Dmedia%26token%3D7d703967-c3f7-4125-834b-f695362bf90b&#x26;width=40&#x26;dpr=4&#x26;quality=100&#x26;sign=34b00d6f&#x26;sv=2" alt="" data-size="line">.
* Click on it and, in the web part search box, enter **PagesMenu** to quickly find and select the Pages Menu web part, which is named "IAI - PagesMenu".

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F3EBFpD2D644wtCILYReV%2FAdd.png?alt=media&#x26;token=1c2294c6-8fbd-4e12-bbfe-d2446a775ee6" alt=""><figcaption></figcaption></figure></div>

* Click the **Edit properties** <img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FEZA6woQFgRsruTBzoFlX%2Fimage.png?alt=media&#x26;token=e22b30bb-89b7-4553-940f-411d2b2b2f09" alt="" data-size="line"> button on the left of the web part to open the property pane and set options such as General settings and View settings. See below for more information on each of these sections.

***

## Configuration

1. [View settings](#view-settings)
2. [Generale settings](#general-settings)

### View settings

The View settings are as follows:&#x20;

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fw0GnRKn9WWQ9dw0p0rjJ%2F2025-09-03%2010_45_13-Settings.png?alt=media&#x26;token=f12ca9fa-e33d-43bc-aa4b-89c7eb633bea" alt=""><figcaption></figcaption></figure></div>

By opening this first configuration, you will see the following options:

* **Do you want to hide the background tab?** You can choose to hide or display the webpart background. The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
* **Do you want to hide the background shadow?** You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
* **Select the type of background shadow:** if you decide to set the background shadow, a further configuration will appear and you can select the style from **High Contrast, Light,** or **Dark** options.
  * If you select **High contrast**, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
  * By choosing the **Light background shadow**, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
  * Finally, the **Dark background shadow** style provides a darker, more intense effect, adding depth and emphasizing the background even more.
* **Insert title**: thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “My apps” at the top left angle of the webpart.
* **Do you want to hide the title?** Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
* **Enter the name that will be used for the "Home"**: here, you can customize the name of the entry point (**Site Pages**). The default name is "Home". This setting is linked to the last one (**Do you want to show the top-level folder?**), which means that it is useful if you decide to show the top-level folder. In addition, it works if a cutting path has not been entered. See an example below:&#x20;

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FY9JK6natqpnX974AjSoV%2FKBHome1.png?alt=media&#x26;token=cc737926-1c13-4261-9e7e-c6b86606985d" alt=""><figcaption></figcaption></figure></div>

* **Do you want to show icons for individual elements**: you can decide to show icons identifying different types of items.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fqm4doUxqf2sjJlmrkExd%2FIcons.png?alt=media&#x26;token=f28f5184-1449-4689-9096-ca99995f0af3" alt=""><figcaption></figcaption></figure></div>

* **Do you want to open the first folder by default**: you can decide whether the first folder will be open or closed by default.

<div><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F7Oqsi9aDwBnf8q9118Rw%2FFirstFolderClosed.png?alt=media&#x26;token=e7239381-c36a-4d34-b31c-dcb81aee5bed" alt=""><figcaption><p>The first folder is closed by default.</p></figcaption></figure> <figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FS4INwEyPZ9ZcVHyEDpoi%2FFirstFolderOpen.png?alt=media&#x26;token=b09b7d0c-be6e-404c-b6e8-a9190d2f86ec" alt=""><figcaption><p>The first folder is expanded by default, showing subsections.</p></figcaption></figure></div>

* **Do you want to enable scrolling?** You can activate scrolling and set the web part height.
* **Enter the height in pixel of the webpart:** you can set a fixed height for this section and use the scroll bar to read its content.
* **Do you want to show the top-level folder?** You can decide to hide or show the top-level folder, i.e., the entry point.

### General settings

The General settings are as follows:&#x20;

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FodpN3isd8mh0xhRBOfD0%2FGeneralSettings.png?alt=media&#x26;token=7149a174-b31e-4d4b-8f7d-2d8711a69970" alt=""><figcaption></figcaption></figure></div>

* **Insert title**: you can choose a title for this section. If you leave this field empty, the web part will have no title.
* **Enter the cutting path**: if you want to display only a subset of the **Site Pages** folder, like the **SystemPages** subsection, here you need to enter the **URL of the subfolder**.

> For example: <https://intranetai.sharepoint.com/sites/my-hub/KB/SitePages/SystemPages>

* **Do you want to open internal links in a new tab?** You can choose to open internal links in a new tab or the current tab.
* **Do you want to open external links in a new tab?** You can choose to open external links in a new tab or the current tab.
* **Do you want to open pages in a new tab?** You can choose to open pages in a new tab or the current tab.
* **Do you want to show the name or title of links?** You can choose to show the name or title of links.
* **Do you want to show the name or title of pages?** You can choose to show the name or title of pages.
* **Do you want to sort files alphabetically or by a specific field?** You can decide to sort items alphabetically or based on a specific field, the **Order** field. The steps required for creating the **Order** field are described below.

#### Create the Order field

To create the **Order** field, you need to manually add a column of the **Number** type to the **Site Pages** library. The necessary steps are as follows:

* Enter the **Site Pages** library and click **+Add column**.
* Select **Number** and click **Next**.

<img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FdBkfaWr2AxSCK6lEu9Tq%2FOrder1.png?alt=media&#x26;token=d1d181a1-7d92-4555-8015-7c822ac96f0f" alt="" data-size="original">

* Enter the column **name**: **Order**.

<img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fmni8LfwvXT9yFEuS8yHf%2FOrder2.png?alt=media&#x26;token=e5ec833e-3623-4a6a-8552-47d81c15a2fb" alt="" data-size="original">

* Save.&#x20;

To set the order of items in a specific folder, take the following steps:

* Click **Edit in grid view.**

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FzBlWko4V0Mcsh9PD5t1B%2FOrder3.png?alt=media&#x26;token=693519aa-a9ce-4695-b961-2f4d28c91ea6" alt=""><figcaption></figcaption></figure></div>

* For each item, enter a number in the **Order** field.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FcjJrtG8kCfGaqAQcFZO5%2FOrder4.png?alt=media&#x26;token=b2a3f034-d4ab-47c1-9928-e4bf25ed782d" alt=""><figcaption></figcaption></figure>

* Click **Exit grid view**.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FRsTHcTO4nPsZ8fABHlXv%2FOrder5.png?alt=media&#x26;token=78e7bd2e-3c05-4dde-a4fd-742c269e5f28" alt=""><figcaption></figcaption></figure></div>

Now, make sure that the Pages Menu web part is configured so that the items are sorted based on the **Order** field.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FXlIGgWjtXMNBgL0zbFqd%2FOrder.png?alt=media&#x26;token=0112724c-837e-4dff-9d39-39fa810df15d" alt=""><figcaption></figcaption></figure></div>

The configuration is complete: sections, pages, and links will be displayed in the specified order.

{% hint style="info" %}
The Pages Menu web part does not work across sites; it only functions within the site where it is added and configured
{% endhint %}

{% hint style="info" %}
If a user doesn't have access to a page, they won't see that page in the structure.
{% endhint %}

{% embed url="<https://intranet.ai/>" %}
