diff --git a/_dashboards/branding.md b/_dashboards/branding.md index 7460abcc4e..830dab057e 100644 --- a/_dashboards/branding.md +++ b/_dashboards/branding.md @@ -35,6 +35,9 @@ loadingLogo | Loading logo used when OpenSearch Dashboards is starting. See #3 i faviconUrl | Website icon. Loads next to the application title. See #4 in the image. applicationTitle | The application's title. See #5 in the image. +To consolidate navigation controls and reduce the space the header takes up on the page, see [Condensed header](#condensed-header). +{: .note} + To start using your own branding elements in OpenSearch Dashboards, first uncomment this section of `opensearch_dashboards.yml`: ```yml @@ -90,6 +93,57 @@ mark: applicationTitle: "My custom application" ``` +### Condensed header + +The condensed header view reduces the footprint of the header and frees up space on the page by combining navigational elements into a single header bar. + +The current default view remains close in appearance to the two-bar header offered in the previous version of Dashboards, with minor differences. To specify the condensed header, add the configuration property `useExpandedHeader` to the `opensearch_dashboards.yml` file and set the value to `false`, as the following example illustrates. + + ```yml +# opensearchDashboards.branding: + # logo: + defaultUrl: "https://example.com/sample.svg" + darkModeUrl: "https://example.com/dark-mode-sample.svg" + # mark: + # defaultUrl: "" + # darkModeUrl: "" + # loadingLogo: + # defaultUrl: "" + # darkModeUrl: "" + # faviconUrl: "" + applicationTitle: "my custom application" + useExpandedHeader: false +``` + +In a future release, default behavior will become `useExpandedHeader: false`. If you want to retain the default view in subsequent releases, you can explicitly set the property to `true` in advance. Alternatively, you can also do this when upgrading. +{: .note } + +The condensed view header appears as in the example below. + +![Condensed header]({{site.url}}{{site.baseurl}}/images/DBs-Condensed.jpeg) + +Header element | Description +:--- | :--- +OpenSearch logo | See #1. Functions as the home button. +Header bar | See #2. A single header bar used for all navigation controls. + +The default view remains close to the traditional view, with minor changes. + +![Default header]({{site.url}}{{site.baseurl}}/images/DBs-Traditional.jpeg) + +Header element | Description +:--- | :--- +Home button | See #1. Returns to the home page and provides an indication when a page is loading. +Header label | See #2. The label also functions as a home button. +Navigation controls | See #3. Additional navigation controls on right-side insertion points. + +#### Preserving nagivation elements in the default view + +You can continue using the top header bar in the default view for custom navigation links (such as menu items and plugins). Follow the steps below to keep these elements in the top header in the default view. +1. Replace the property `coreStart.chrome.navControls.registerRight(...)` with `coreStart.chrome.navControls.registerExpandedRight(...)` and then replace the property `coreStart.chrome.navControls.registerCenter(...)` with `coreStart.chrome.navControls.registerExpandedCenter(...)` + +2. Make sure the configuration property `useExpandedHeader` is explicitly set to `true`. + ## Sample configuration The following configuration enables the security plugin and SSL within OpenSearch Dashboards and uses custom branding elements to replace the OpenSearch logo and application title. diff --git a/images/DBs-Condensed.jpeg b/images/DBs-Condensed.jpeg new file mode 100644 index 0000000000..d1f5148eba Binary files /dev/null and b/images/DBs-Condensed.jpeg differ diff --git a/images/DBs-Traditional.jpeg b/images/DBs-Traditional.jpeg new file mode 100644 index 0000000000..7a31ce8a7f Binary files /dev/null and b/images/DBs-Traditional.jpeg differ