Creating Navigation and Adding Pages

Page Types

The primary navigation and sidebar navigation in Knapsack workspace provide different types of pages to help you organize and manage your content efficiently. Here are the page types available:

Page

The Page type is a flexible option for adding documentation and/or content. With a Page, you can easily create text-rich pages, embed media such as images and videos, and incorporate various types of content. Pages are perfect for documenting information, writing articles, and even documenting design tokens, which are key elements of your design system.

Pattern

The Pattern type is specifically designed for adding components to the system. Patterns are reusable components or design elements that can be used across multiple pages or projects. By creating pattern-specific pages, you can centralize and document your design system components, making it easier to maintain consistency and share them with your team. Additionally, these pages often include a code playground, allowing you to showcase and interact with the code snippets associated with the pattern.

Group

The Group type serves as a folder for organizing your pages. By creating groups, you can easily categorize and group similar content together, providing organized and structured navigation within your workspace. Groups are particularly useful for managing projects with multiple pages, allowing you to navigate and find information more efficiently.

In addition to these page types, both the primary navigation and sidebar navigation offer various options for managing and customizing your workspace:

  • Adding New Sections: Easily create new sections in the primary navigation by clicking the "Add Section" button and choosing between Page, Pattern, or Group.
  • Primary Nav Action Menu: Access the action menu by hovering over a primary nav item, allowing you to perform actions such as renaming, converting to a pattern, duplicating, moving, hiding, changing privacy, or deleting the items.
  • Reordering Primary Nav Items: Simply click and drag the action menu icon to change the position of primary nav items according to your preference.
  • Sidebar Navigation: Add child pages, patterns, or groups to your sidebar menu by hovering over a desired link, clicking the plus icon, and choosing the appropriate entity type.

By utilizing these features, you can effectively customize and manage your workspace's primary (top) navigation and sidebar (secondary) navigation, tailoring it to your specific needs and enhancing the overall user experience.

Primary (Top) Navigation

The primary navigation in the workspace allows you to organize and manage your content efficiently. Here's how you can use and customize the primary nav:

Adding a New Primary Nav Section

To add a new section to the primary nav, click on the "Add Section" button. A modal will appear where you can choose to create a Page, Pattern, or Group. Select the appropriate option, fill in the necessary details, and click "Create" to add the new section to the primary nav.

Primary Nav Action Menu

The primary nav now includes an action menu that provides convenient options for managing your workspace navigation. To access the action menu, hover over a primary nav item. Click on the action menu button to open the menu.

The action menu includes the following options:

  • Page Actions: Provides a dropdown menu with various actions for managing the specific page.
  • Rename: Allows you to change the name of the primary nav item.
  • Convert to Pattern: Converts the primary nav item to a reusable pattern for easy sharing and consistency.
  • Duplicate: Creates a copy of the primary nav item.
  • Move to: Moves the primary nav item to a different position within the primary nav.
  • Hide Page: Hides the primary nav item from the primary navigation display.
  • Change Privacy: Adjusts the privacy settings for the primary nav item.
  • Delete: Removes the primary nav item from the primary navigation.

Reordering Primary Nav Items

To reorder the primary nav items, simply click and drag the action menu icon on the left side of each primary nav item. Dragging the icon up or down will change the position of the primary nav item accordingly.

This guide will lead you through the process of effortlessly adding child pages, patterns, or groups to your sidebar menu. By following these steps, you'll easily master content hierarchy and create a seamless user experience.

Add a Subpage

  1. Hover over the desired link in your sidebar menu that you wish to expand.
  2. Look for the circle with a plus sign (+) icon and click it.
  3. Instantly, a user-friendly dropdown menu will appear, offering options to add a child page, pattern, or group directly under the selected link.
  4. Choose the entity type that best suits your needs.

  5. Provide a name for your subpage and click "Add".

You did it! With these simple steps, you'll effortlessly navigate the process of adding child entities to your sidebar, allowing for streamlined organization and an enhanced user experience. Enjoy exploring this seamless feature!