Navigation

Setting up the navigation menu is very easy in the NCAMEO application. Just follow the steps below: 

Click on the “Plus” Sign on Start tab. As shown in the below image. A Form will open in the sidebar where you can configure and set up pages in the application.

  1. Title: The display name of the page or route shown in the browser or app.
  2. Breadcrumb: A label used in breadcrumb navigation to represent the current page location.
  3. Order: Defines the sequence in which this page appears in the navigation menu.
  4. Description: A brief summary or purpose of the page or route.
  5. Show in Menu: Determines whether the page should be listed in the main navigation menu.
    1. Show: Controls the visibility of the page or component in the application.
    2. Web Icon: The icon displayed for this page in the web interface.
    3. Active Web Icon: The icon shown when this page is currently active or selected in the web interface.
    4. Mobile Icon: The icon displayed for this page in the mobile version of the application.
  6. Url: The path or endpoint used to navigate to this page.
  7. Roles: User roles allowed to access or view this page.
  8. Parameters: URL parameters passed to this page for dynamic behavior or data.
    1. Name: The key name for a parameter or model attribute used in this page.
    2. Value: The value assigned to the corresponding parameter or field.
    3. Model Attribute: A linked model field used to bind data dynamically on the page.

Now you can start adding content form on the page.

  1. Title: The title displayed at the top of the panel or component.
  2. Select Form: Choose a form to embed or display within the panel.
  3. Select View: Select a view layout or component to render inside the panel.
  4. Select Width: Defines the width of the panel (e.g., full, half, custom width).
  5. Dynamic Title: Enables the title to change dynamically based on data or state.
  6. Is Bind Form: Indicates whether the panel is bound to a form for data interaction.
  7. Show Shadow?: Toggles a drop shadow effect around the panel for visual depth.
  8. Col Class: CSS grid or column class to control panel width and responsiveness.
  9. Panel Header Background: Sets the background color of the panel's header section.
  10. Panel Header Text Color: Defines the color of text in the panel header.
  11. Panel Background: Specifies the background color of the entire panel.
  12. Panel Class: CSS class for styling the outer panel container.
  13. Panel Body Class: CSS class used to customize the panel's content area.
  14. Hide Header?: Option to hide the panel’s header section for a cleaner look.

Click Confirm and item is added to the navigation as shown in the image below: