Masthead

The Masthead is a container component that groups other components commonly used at the top of a page into a Responsive Grid, adding a Navigation component, a Search Component, and an Image component that can be used to pull in a company logo.

Using the Masthead Component

While the Masthead can be used on any page, where it really shines is with principal/dependent pages. Using the Masthead on a principal page automatically ensures that all dependent pages will have the same branded section at the top of the page. Updates to the Navigation component on the principal page ripple through all dependent pages, so it's easy to add a navigation link once—and see on all pages in the app.

  • Add a Masthead component to a page.
  • Click Add Component and choose from the dropdown:
    • Add Logo
    • Add Navigation
    • Add Search
  • Need to space out the three components across the masthead? Use Add Spacing between components.
  • Want to move components to a different location in the Masthead? Just drag and drop.

Once the components are laid out in the Masthead, use their individual properties to configure them.

Properties

Component properties

  • Positioning: Determines how the Masthead behaves when the page is scrolled.
    • Scrolls with Page: The Masthead scrolls with all other components.
    • Fixed: The Masthead is fixed to the top of the page and does not scroll ("sticky masthead").
    • Fixed when at top: If the masthead is not inherently located at the top of the page (for example, it's beneath a large banner image), it will scroll until it reaches the top, and then become fixed there.
  • Unique ID Nintex Apps automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

    Note: 

    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.
    • To set margins for each side individually, click Separate.

    Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Standard display logic options are available to display or hide the component or feature.

Nested elements

Spacing properties

  • Change order: Left and right arrows move the selected spacing item left or right on the masthead.

  • Unique ID Nintex Apps automatically generates an alphanumeric Id for the element; if preferred, give it a practical name.

  • Flex ratio: This sets the size of this spacing division relative to other items in the mastheads. For example, if there are two items in the masthead, and the flex ratio for each is 1, they will each take up ½ of the masthead. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies ⅔ of the grid, and the second one occupies ⅓ of it.

  • Min width: Sets a minimum width for the spacer. When the minimum width is exceeded, the grid division will stack above or below other masthead items. This can be specified using px, em, rem, %, vh, or vw measurements.

    Note: 
    • Em, %, vh, or vw are more responsive to screen size.
    • Ensure the division's minimum width is at least as wide as its contents.

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Note: 

To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

Margins: Sets a component's margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click All.
  • To set margins for each side individually, click Separate.

Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Logo properties

When you add a logo to the Masthead, the properties are the same as those for the Image component.

Add navigation to the Masthead; the properties are identical to those for the Navigation.

Search properties

The properties for Search added to the Mastheads are the same as those for the Search.