Working with a navigation bar

1. To add a logo to a page, open a page in the Pages module. In the following example, a page with the name Homepage (A) is opened. In the components menu, scroll to the Navigation (B) components. You can also use the Search feature to quickly navigation to this group of components.

Drag and drop the navigation bar (C) component to the canvas.

Note 1: In this case, the page canvas (D) is based on a mobile device. You can change the canvas displayed using the available browser device (D) buttons.

2. Click on the new component to show the options. As shown, the component name is AppBar (A) - application bar. In the options menu displayed, you can now customize various options such as the background and text color. (See Note 2 below).

In the example shown, the default "Primary" color is used for the background and text is displayed in white.

You can change or remove the (Title) text displayed (D). In the Logo (E) field, you can paste details for the logo you want to use. As you are building a cloud based application, you can add details based on a URL.

In the following example, a royalty free scalable vector graphic (.svg) image is used as an example only. Please contact your marketing department for obtaining the images required for your organization.

You can adjust the additional settings such as applying the required logo width (F) parameters.

3. As shown in the example, an image is now displayed. The background color is now Transparent (A) and the text color is Dark (B).

There is no title text to display and the logo url (C) details are shown in the Logo details. The width for the logo has been set to 75 (D) pixels (px). These settings can be adjusted as required.

4. The default button styles have also been adjusted as an example to show how you can also adjust styles. As shown in the Options menu tab (A), you can apply different text (B) and linking options.

In the Styles (C) menu, you can apply a specific background color based on RGB or Hex values. In this case, the color #DDDD00 (D) has been applied to the button background based on the color in the example logo image.

You can apply additional styling based on the options available as you scroll (E) through the Styles menu.

Note 2: Both of these menus are based on details that you can customize in the Theme Builder. For details, please refer to the Theme Builder Reference.

Note: 3: The .svg file used in this example can be obtained: From Wikimedia Commons, the free media repository

You can apply a name to identify the component. To apply a name, click on the edit button (A) in the component name.

Apply the required name. In the example here, the name Logo (B) is applied.

Click on the Checkmark button to apply the name for the component.

If you now open the component tree (D) for the page, you can see that the name change Logo (E) is reflected in the component tree.

Click on the component menu ... (F) to display the menu. Select Options to open the options menu for the Logo component.

Click on the Convert to partial (A) button. The Save as partial dialogue is displayed. Specify the name (C) you want to assign to the partial and press the Save (D) button.

After you press Save, the page is redisplayed and the component name and the partial name as show n in the example below are the same (A). You also have the option to convert the partial to a component (see Creating a component for details).

When you open the Components tab (C), and then open the Partials (D) tab, the newly created partial is now listed.

You can now drag and drop the component to different pages in your application.

Click on the Save as new component (A) to create a component that you can add to the components menu. The Save as new component (B) dialogue is displayed. Specify a name (C) that reflects the component and choose the category (D) in which you want to include the component.

You can also click on the Share via Block Store button. See Share via Block Store for details.

The component is added to the component menu and can be dragged and dropped to the canvas on different pages as required.

Sharing the component via block store

You can also switch on the radio button (A) to indicate that you want to share the component via the Block Store. Additional fields are displayed.

Where you select

- Create new Block (B), you need to provide a name for the block (C).

- Add to existing Block (D), you can select the block from the pull-down menu.

Once created, you or other users can access the block for including in a application.