What is Hygraph and how does it help with website navigation?
Hygraph is a headless CMS platform that enables you to create, manage, and deliver content efficiently. For navigation, Hygraph allows you to build navigation components that link to internal or external content, helping users move smoothly from their entry point to their destination within your app or website. A well-structured navigation system in Hygraph improves user experience by providing clear directions and organizing content systematically. Source
How do I create a navigation model in Hygraph?
To create a navigation model in Hygraph, go to the “Schema” menu, select “Add” from the Models section, and add a model called Navigation. You can then add fields such as a slug field for NavId (with options like lowercase, unique, and specific pattern validations) to differentiate navigation areas (e.g., main, footer, social navigation). Source
How can I add internal and external links to my navigation in Hygraph?
Create a component called Link in the Schema menu, then add fields for Display Text, Page (reference to Product, Blog Post, Landing Page), and External URL (with validation for URL patterns). Add this Link component to your Navigation model as a Nav Link field, allowing multiple values. This lets you populate your menu with both internal and external links. Source
How do I query the navigation model in Hygraph?
You can use the GraphQL API to query your navigation model. For example, to fetch the main menu, use a query like navigation(where: { navId: "main" }) to retrieve the navId and navLink fields, including details for each link such as id, page, url, and displayText. Source
How does Hygraph's navigation model enhance user experience?
A well-crafted navigation menu in Hygraph acts as a strategic guide, leading users through your website or app and creating paths tailored to your target audience. This improves user satisfaction, engagement, and conversion rates by making it easy for users to find what they need. Source
Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also provides robust security features, including SOC 2 Type 2, ISO 27001, and GDPR compliance. Source
Does Hygraph provide an API for content management?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. You can learn more at the Hygraph API Reference.
What integrations does Hygraph support?
Hygraph supports integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. Source
How does Hygraph ensure optimized content delivery performance?
Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized performance helps reduce bounce rates and increase conversions. Source
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection for users. For more details, visit the Hygraph Security Features page.
How does Hygraph protect sensitive data?
Hygraph provides features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to safeguard sensitive data and meet regulatory standards. Source
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. Source
What business impact can customers expect from using Hygraph?
Customers can expect time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source
What industries are represented in Hygraph's case studies?
Hygraph's case studies span industries such as food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. Source
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More success stories are available here.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). Source
How does Hygraph solve these pain points?
Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with its GraphQL-native architecture, ensures consistent branding with content federation, streamlines workflows to reduce costs, accelerates speed-to-market, and supports scalability. It also simplifies development by reducing boilerplate code and streamlining query management. Source
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more details, see the CMS KPIs blog.
Support & Implementation
How easy is it to get started with Hygraph?
Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. Users can sign up for a free account and access documentation, video tutorials, and onboarding guides. Source
What training and support does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. Source
How does Hygraph handle maintenance, upgrades, and troubleshooting?
Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers get dedicated onboarding and expert guidance, while all users can access documentation and the community Slack channel for additional help. Source
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by companies such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details, visit the Hygraph Case Studies page.
What feedback have customers given about Hygraph's ease of use?
Customers have praised Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The user interface is described as logical and user-friendly, making it accessible for both technical and non-technical teams. Source
Technical Documentation & Resources
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects.
In Hygraph, you can create a navigation component that links to internal or external content to carve out content paths for your users from their initial point of entry to the final destination within your app.
Written by Lo
on Apr 17, 2024
Navigation is one of the main content components of your website or application. It helps provide directions to end-users and a topic summary of the content available. A well-structured navigation system is integral to the overall content design and layout of your website or app. It not only helps organize and categorize your content systematically but also ensures a smooth and seamless journey for your users.
In Hygraph, you can create a navigation component that links to internal or external content to carve out content paths for your users from their initial point of entry to the final destination within your app. Let’s create a simple navigation model using components to create a main navigation system.
Note: This guide uses a version of the Next eCommerce Hygraph project without navigation and frontend starter code. To follow along, clone:
The most effective navigation systems consider the users' desires and needs and the business's goals. They create a bridge between the two, guiding the users to the areas where they and the business want them to be. When creating content for the main menu, our aim should be to construct a bridge that connects the user's intent with the business's offerings, making the journey on your website or app a smooth and satisfying experience.
To create a main navigation system, we need to build a Navigation content model. From the “Schema” menu item in our Hygraph project, select “Add” from the Models section and add a model called Navigation.
Slug: Nav ID field
The first field type we will add to our Navigation model is a slug field called NavId with the following options:
Field
Display Name
Slug & Field options
Validations
Slug
Nav ID
Lowercase, Use as title field
Unique, Specific pattern: Slug
The navId allows us to create different navigation content areas. For example, the NavId for this system will be main, but we could also create footer or social navigation.
Building a Link component
Since we want to have to internal and external links in our navigation, creating a component to add to our Navigation model is the best approach. From the “Schema” menu item in our Hygraph project, select “Add” from the Components section, and add a component called Link and add the following fields:
Field
Name
Options
String
Display Text
Title
Reference
Page
Relationship: Many to one Ref models: Product, Blog Post, Landing page Directions: One-way reference Configure reference: Page
Now that we have a Link component, we can add it to our Navigation model. Head back to the Navigation model and add a Basic component called Nav Link with the following options:
Our navigation model is complete, so let’s create content for the main menu. It can seem strange to think of navigation as content that you write, but it is one of the most important elements of your overall content design. The best navigation creates paths tailored to target audience and tell them where to go get what they need and incorporates what you want them to know/where you want them to visit on your website or app.
In the content section of the app, we are going to create a new content entry in the Navigation view. For the Nav ID, enter main , this will serve as the ID for you guessed it, our main navigation system. After this we can add our links to populate the menu. Enter a couple or all of the external links and the internal Page link from the table below:
Link
Display Text
Page or External URL
Clothes
Clothes
External URL: /category/clothes
Shoes
Shoes
External URL: /category/shoes
Accessories
Accessories
External URL: /category/accessories
Decor
Decor
External URL: /category/decor
Summer Campaign
Summer Campaign
Page —> Add document called “Summer Campaign”
After entering the links, click Save & Publish.
A well-crafted menu isn't just a map or a directory; it's a strategic guide that leads your users through the digital landscape of your website or application. It is responsible for creating paths that are specifically tailored to your target audience. These paths serve as a series of stepping stones that guide users towards the areas that you want them to explore, be it certain products, services, or information. The main menu here is directing users to main product groups available in the store and highlights a featured collection of products for a seasonal campaign.
Now that we have a main menu, let’s take a look at the query we need to create a navigation frontend component. Head over to the API playground, and enter the following query:
queryNavigation{
navigation(where:{navId:"main"}){
navId
navLink{
id
page{
...onBlogPost{
id
url:slug
}
...onLandingPage{
id
url:link
}
...onProduct{
id
productSlug
}
}
url:externalUrl
displayText
}
}
}
In the above GraphQl query, we are asking Hygraph to give us the menu with the navID called main. The query fetches the navId and navLink fields of the navigation data.
So, what is the the navigation data and what are we returning?
Well, the navLink field is an object that contains id, page, url, and displayText fields. The page field is further broken down into different types: BlogPost, LandingPage, and Product, each with their own id and url fields.
The query results are all the external and internal page links and its displayText that we entered in the main navigation content entry.
Remember, navigation plays a crucial role in providing clear, user-friendly directions to end-users, guiding them through the multitude of pages and features your platform has to offer. This is a critical factor in creating enjoyable user experience, as it directly influences how easily and quickly users can navigate your site or application.
By making navigation intuitive, straightforward, and efficient, you can significantly enhance the overall user experience. The easier it is for users to find what they're looking for, the more likely they are to stay engaged and return to your website or app in the future. Investing time and resources in crafting a compelling, user-friendly navigation system can improve user satisfaction and, ultimately lead to higher conversion rates. Remember, navigation is the chance to tell the story of your brand or business by creating a treasure map of all the wonderful products and content you have to offer. If you have any questions or feedback, find me in the community!
Next steps...
In part 2 of the Navigation series, we will create a more complex navigation model that includes sub-items and how to create a dropdown menu frontend components.
Join the community
Need help? Want to show off? Join the Slack community and meet other developers building with Hygraph
Lo is Hygraph's Senior Developer Relations Specialist. They focus on developer education around Headless CMS, JS-based frontends, and API technologies as well as the dynamic cross-functional relationship between developers and content professionals.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.