I have a collection called Pages. On the front end, I display them in a navbar. I want the Homepage to be listed first, the About page to be listed second, and the Contact page to be listed third.

Is there a way to define the sorting in the admin? One possible but less than ideal solution would be to add an "order" column and sort the pages based on that when retrieving them for the navbar. However, is there a better approach to achieve this?

chris_heinzlast year
I was looking for something similar where the editors should be able to determine the order of some products displayed in a Products block on the landing page. I used a relationship field with hasMany and hid the clear functionality with an css class. This allows to exclude certain items and rearange them by a individual liking. Next step would be to automatically add the product to the multiselect when a new product is created (gonna use a hook on the product collection for that)
```
      type: "relationship",
      relationTo: "products",
      hasMany: true,
      admin: {
        className: "products-select",
      },
```
I got more into detail here maybe this helps someone
https://discord.com/channels/967097582721572934/1167142709119692870
sssspraylast year
Thanks @chris_heinz
Zephurylast year
how are you creating your navigation menu? Are you querying a global collection with a relationship, or just querying for all pages?
sssspraylast year
querying for all pages @Zephury
Zephurylast year
If there was a way to reorder them in the way you describe, it would be a bad practice, I think. You
could
create a field called "order" in each page and just manually assign numbers, but what happens if you mess up your data integrity; eg, you put the number "3" in the hypothetical
menuOrder
field in two page documents?

Often times, you want to be able to create pages that are
not
listed in your main navigation as well, suchas a privacy policy, or terms and conditions, etc. A common practice is to create a global "Header", or "Settings" so that you can specify exactly which pages you want to be in your navigation. This way, you can have a smaller amount of pages in your main navigation, you can create a separate one for the footer as well, where you will perhaps include even more pages, etc. In an array field, you will be able to reorder them however you like. You can see this example:

https://github.com/payloadcms/payload/tree/main/templates/website/src/payload/globals
https://github.com/payloadcms/payload/blob/main/templates/website/src/payload/fields/linkGroup.ts
https://github.com/payloadcms/payload/blob/main/templates/website/src/payload/fields/link.ts
sssspraylast year
Got it @Zephury, thanks a lot

so the key was to create a global and use the array field
Zephurylast year
yep
sssspraylast year
🙏

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team..