Channel Collection: Multi Page

A channel collection is a grouped set of video pages with built-in navigation. Where a single-page channel is one standalone video page, a channel collection combines multiple channels into one embedded experience: each channel becomes a page, and a navigation bar lets viewers switch between them.

The navigation bar is rendered once across all pages. When a viewer clicks a navigation item, the corresponding channel loads within the same embed, without a page reload.

1.0 | Create a channel collection

When creating a new channel, you are asked to choose between two types:

• Single page: a standalone channel you build and customize yourself.
• Multi page: a channel collection: a grouped set of video pages with built-in navigation.

Select Multi page to create a channel collection.

2.0 | How it works

A channel collection does not contain its own video content or elements. Instead, it acts as a container that links together existing single-page channels. Each linked channel becomes a page within the collection. Learn how to create a single-page channel.

Each sub-channel is a fully independent channel. It retains its own elements, styling, detail page configuration and playout settings. The only properties shared across all pages in the collection are:

• The navigation bar
• The search bar setting
• The content protection policy
• The padding and maximum width

3.0 | General settings

First set the general multi page settings in the General tab

• Channel name
• Stay within channel borders
  When enabled, the Channel collection opens within its container rather than covering the full browser window.
• Enable URL navigation
  When enabled, the Channel collection supports URL-based navigation, allowing specific content to be loaded on page load via URL parameters.
• Channel padding
  Use the Channel padding property to determine the padding area on the Channel’s outer left and right side. Set the padding to 0px if you want the Channel to fill up the full width of the element it’s placed in. Note that the padding setting does not affect the space between Channel elements.
  
• Maximum width
  Enter a value to set a maximum width (for example 1100px). The Channel interface will scale along with the width of its container on the page until it hits the maximum width. Leave this setting blank to disable.
  
• Content Protection
  Apply a Content Protection Policy to restrict access to your Channel. When a policy is active, visitors who do not meet the policy’s conditions will be prompted to authenticate before the Channel content is shown. Select a Content Protection Policy from the dropdown to link it to your Channel.

  Learn more about Content Protection Policies.

4.0 | Navigation 

Go to the Navigation tab to set up the navigation bar appearance and add the navigation items that link to your sub-channels.

4.1 | Navigation items

Use the “Navigation items” section to add and manage the items that appear in the navigation bar.

Click Add navigation item to add a new item. Each item has a label and a type:

• Label: the text displayed in the navigation bar for this item.
• Type
  • Channel
    Links the navigation item to an existing single-page channel. When the viewer clicks this item, that channel loads as the active page.
    • Channel:
      Select the channel to link to. Only single-page channels are available; multi-page channels cannot be used as sub-channels. After selecting a channel, a preview of its elements is shown to help confirm the correct channel has been selected.
  • URL
    Links the navigation item to any URL. Use this to add external links (for example, to other sections of your website) alongside your channel pages.
    • URL:
      Enter the destination URL.

Drag and drop navigation items to change their order in the navigation bar.

4.2 | Navigation styling

Use the Navigation styling section to control the visual appearance of the navigation bar and its items.

• Navigation bar options
  • Alignment
    Set the horizontal alignment of the navigation items within the bar: Left, Center or Right.

• • Background color
    Set the background color of the navigation bar.
  • Font family
    Select a font for the navigation bar labels.

• Navigation items options
  • Background border radius
    Set the border radius of the individual navigation items. Use 0px for square corners or a higher value for rounded corners.

Item colors are configurable for three states:

• Default
  The appearance of items in their resting state.
  • Text color: the label color.
  • Item background color: the background of each individual item.
• Hover
  The appearance of items when a viewer moves their cursor over them.
  • Text color
  • Item background color
  • Underline text: toggle on to display an underline beneath the label on hover.
• Active
  The appearance of the currently selected navigation item.
  • Text color
  • Item background color
  • Underline text: toggle on to display a permanent underline beneath the active item’s label.

5.0 | Responsive behavior

On larger screens, the navigation bar is displayed as a horizontal bar. If the number of navigation items exceeds the available width, the overflowing items are grouped into a More dropdown menu.

On smaller screens (mobile), the horizontal bar is replaced by a hamburger menu button. Tapping the button opens a full-screen navigation overlay with all items listed vertically.

6.0 | Embed a channel collection

A channel collection is embedded using the same method as a single-page channel. Only one embed code is needed: the navigation bar and all linked sub-channels are loaded from that single embed.

Learn more about embedding Channels.