Modeling groups of navigation links

Prismic for Content Creators
1

Hi, without being able to add a slicezone that contains multiple fields I'm confused as to how to model the following:

Navigation

  • Legal (title:"Legal", links: [...])
    • Terms and Conditions
      - title
      - href
    • Privacy Policy
      - title
      - href

Basically, a header that has multiple groups of links that contain links with a href and title.

So something that could generate:

Legal
Terms
Privacy

Other
Other 1
Other 2

Any help would be appreciated!

2

The simplest way I've found to achieve this so far is to just have 1 type link category which has a title and a repeatable slice NavLink and rely on tags to denote that these groups of links belong to the header vs footer

image
image986×772 28 KB
strong text

Then link categories are tagged with header / footer

image
image1308×602 16.1 KB

Then finally get the items

export type TNav = { footer: TLinkGroup[]; header: TLinkGroup[] }
export const getNavProps = async function (client: Client, lang: string) {
  const links = await client.getByType<TLinkGroup>('link-category', {
    lang: lang,
    pageSize: 1000,
  })
  return {
    header: links.results.filter((linkGroup) =>
      linkGroup.tags.includes('header'),
    ),
    footer: links.results.filter((linkGroup) =>
      linkGroup.tags.includes('footer'),
    ),
  }
}

I'd still like to know if there's a much better design than this. Without the ability to have a repeatable set of a group of fields this seems quite limiting.

4

Hello @kyle2, take a look at this article we wrote to cover this use case:

Let us know if it's useful for you