navu-docs

Navu Sidebar Styling

Theme colors

Theme layout

Common theming

Layout

Other advnaced styling

Theme Colors

The sidebar comes with a default built in theme that defines a set of colors. This theme can be adjusted based on the host website by setting a bunch of CSS properties.

Note: For most websites you need to set only a few of these properties. More on that later.

Following are the default properties and values that define the theme:

--nv-surface-base: #ffffff;
--nv-surface-low: #fafafa;
--nv-surface-medium: #f7f7f7;

--nv-on-surface: #1D1B20;

--nv-highlight-surface: #FEF7FF;
--nv-highlight-surface-medium: #E7E0EC;
--nv-highlight-surface-high: #EADDFF;

--nv-on-highlight-surface: #1D1B20;
--nv-on-highlight-surface-medium: #49454F;
--nv-on-highlight-surface-high: #4F378B;

--nv-primary: #6750A4;
--nv-secondary: #03DAC6;
--nv-tertiary: #625B71;

--nv-on-primary: #FFFFFF;
--nv-on-secondary: #000000;
--nv-on-tertiary: #FFFFFF;

--nv-error: #B3261E;
--nv-on-error: #FFFFFF;
--nv-error-container: #F9DEDC;
--nv-on-error-container: #8C1D18;

--nv-outline:#d8d8d8;
--nv-outline-darker: #79747E;

The first set of these properties with the prefix --nv-surface- define the colors of the main surfaces - containers for content or UI controls. Another CSS property -nv-on-surface deifnes the color of the content that appears on these surfaces. Note that there is only one property for the three surfaces. The idea here is that these surfaces should have similar levels of brightness so the same foreground color works on all three surfaces. e.g. the default values are white, very light gray, light gray.

The next set of properties prefixed with --nv-highlight- define the surfaces that are actionable (e.g. clickable) or contain special content that may need attention. There are three levels based on the importance of the content. Each has a corresponding property prefixed with --nv-on-highlight- that sets the foreground color of the content that appears on these actionable surfaces.

The next set defines the special colors for the theme. These are used in UI controls - buttons, checkboxes, links etc. Or sometimes for getting attention like notifications or pulses. --nv-primary is usually the primary accent color for a site. Each of these also has a corresponding foregroung color.

The next set defines colors used to show errors, or surfaces that contain error related content.

Lastly, colors for borders, outlines, dividers.

Theme Layout

Following is a visual map of where these properties are being used:

Ref	Property
1	–nv-surface-low
2	–nv-on-surface
3	–nv-highlight-surface-high
4	–nv-on-highlight-surface-high
5	–nv-surface-base
6	–nv-surface-medium
7	–nv-tertiary
8	–nv-primary
9	–nv-secondary
10	–nv-highlight-surface
11	–nv-on-highlight-surface
12	–nv-highlight-surface-medium

Common Theming

For most websites you do not need to adjust all of the properties described in the sections above. Most of the default colors are neutral enough to match most websites.

The properties you will likely have to edit more frequently are: Main highlight color, Background color for links, Secondary color that highlights messages when they arrive, and background for tabs and suggested questions

Here are two common configuration examples:

navu-sidebar {
  --nv-primary: #ec9321; // buttons, etc 
  --nv-secondary: #ec9321; // color of citations on hover, message pulsing color

  --nv-highlight-surface-high: rgb(242, 232, 221); // background of sugegstion question, tabs
  --nv-on-highlight-surface-high: rgb(242, 232, 221); // forgeround of sugegstion question, tabs

  --nv-highlight-surface: rgb(250, 247, 246); // background of citation links
}

navu-sidebar {
  --nv-primary: rgb(0, 114, 188);
  --nv-secondary: #35bfff;
  --nv-highlight-surface-high: #0272bc;
  --nv-on-highlight-surface-high: #fff;
  --nv-highlight-surface: #eff2f4;
}

Layout

For most cases, the sidebar is designed to operate in three modes based on different window wizes. One wider screens the sidebar moves the content to the left. On medium sized screens, the sidebar opens as an overlay on top of the content - like most chat bots. On smaller screens, the sidebar takes over the screen.

Note: The underlying code does not necessarily have any notion of these three modes. These need to be defined on every site via CSS. The advantage of these being CSS only is that it makes them very flexible. The disadvantage being that you have to do it on every site

To help with the CSS, Navu will add class names to the body element indicating whether the sidebar is open or not - nv-sidebar-open and nv-sidebar-closed

Here’s some sample CSS the defines these three modes:

@media (min-width: 1200px) {
  body.nv-sidebar-open {
    padding-right: 400px;
  }
  .nv-sidebar-open header {
    width: calc(100% - 400px);
  }
}

@media (max-width: 1200px) and (min-width: 801px) {
  navu-sidebar {
    right: 16px;
    top: 16px;
    bottom: 16px;
    height: auto;
    --nv-drawer-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    --nv-drawer-radius: 12px;
  }
}

@media(max-width: 800px) {
  navu-sidebar {
    --nv-drawer-width: 100%;
    --nv-sidebar-mobile: true;
  }
}

Let’s analyze this CSS.

Thew first section is under the media query min-width: 1200px so this defines the css for screens wider than 1200px. In this case, we push the content from the right by 400px which is the default width of the sidebar. Note that sometimes we add padding to the right. At other times we manipulate the width. For most cases padding should do it. If the element you’re trying to resize has a width set, then you can tell it a new width by setting it to width: calc(<old-width> - 400px);

The second section describes the overlay mode. (max-width: 1200px) and (min-width: 801px) defines the styles for widths between 801 and 1200 (both inclusive). In this case we do not shift any content, but style the sidebar drawer to not go from edget to edge, and have a shadow. This gives it a visual feeling of being overalid on top of the website content.

The last section (max-width: 800px) is for smaller screens. In this case we set the drawer width to be 100% so it takes over the whole screen. Important: you should set the --nv-sidebar-mobile property to true in this case. Since this mode hides the content completely, it gives the underlying code to alter some behavior for this special case.

Layout Transition Points

In the example above, it seems the transition points for the different modes is fixed. But they should be determined based on the website.

e.g. Look at the screeenshots below

In the first image, you will notice that sidebar works great at a certain size (1400px in this case).

In the second image, you will notice that the sidebar is causing the menu on the side to look shrunk of badly laid out. So that is your first transition point when that happens.

In the third image, you will see that site has replaced their menu with a mobile menu. That’s a good indicator when to think about what the secont transition size should be.

Adhesion

You can position the sidebar such that the top/bottom of the sidebar stick to existing elements on the web page. For example, stick the top of the sidebar to the bottom of the site header.

The way to do that is to add a CSS selector for elements to adhere to - top and bottom, in the site settings.

In addition to that you can use the following CSS properties to affect adhesion:

–nv-sidebar-no-adhesion	If set to true, adhesion selectors are ignored.
–nv-sidebar-adhesion-top-offset	Numeric value to add extra offset to top of sidebar adhesion. e.g If set to 10, the sidebar’s top will stick to the bottom of the selector + 10px.
–nv-sidebar-adhesion-bottom-offset	Numeric value to add extra offset to bottom of sidebar adhesion. e.g If set to 10, the sidebar’s bottom will stick to the top of the selector + 10px.

Other styling

You can update the font size and family as follows:

nv-sidebar {
  font-size: 18px;
  --nv-font-family: monospace;
}

To affect the styles when the sidebar is in fullscreen mode, you can apply styles as such. (Note: You need to add !important on position styles for fullscreen mode):

nv-sidebar[fullscreen] {
  top: 10px !important;
  right: 10px !important;
  left: 10px !important;
  bottom: 10px !important;
  width: auto !important;
  height: auto !important;
}

You can change the position of the FAB by styling the FAB element:

navu-sidebar-fab {
  bottom: 40px;
  right: 40px;
}

Here are some other CSS properties exposed by the sidebar:

Property	Description	Default
–nv-sidebar-fab-icon-size	Size of the icon/image in the FAB button	40px
–nv-sidebar-fab-padding	Padding around the icon/image in the FAB	8px
–nv-sidebar-fab-bg	Override the FAB background	--nv-primary
–nv-sidebar-fab-fg	Override the FAB icon color	--nv-on-primary
–nv-drawer-close-button-display	Display property of the close button in the sidebar. Set it to none if the web designer wants to implement their own close button.	-
–nv-drawer-fullscreen-button-display	Display property of the fullscreen button in the sidebar.	-
–nv-drawer-width	Width of the sidebar drawer	400px
–nv-drawer-radius	Border radius of the drawer	-
–nv-drawer-border-left	Left border of the drawer	1px solid var(--nv-outline)
–nv-drawer-icon-button-color	Color of the drawer icons - close, menu	--nv-tertiary
–nv-sidebar-user-icon-color	Color of the user/bot/agent icon in chat	#808080
–nv-sidebar-dots-color	Color of the dancing dots when message is pending	rgba(0, 0, 0, 0.6)
–nv-sidebar-dots-color-wave	Color the dancing dots animate to	rgba(0, 0, 0, 0.3)
–nv-sidebar-title-h2-size	Font size of page titles, like title of the Splash screen	40px
–nv-sidebar-title-h3-size	Font size of section titles on Info page	32px
–nv-sidebar-title-font-weight	Font weight of the section title	100
–nv-sidebar-title-line-height	Line height of the section title	1.2
–nv-sidebar-form-message-size	Font size of the text on Info page	18px
–nv-sidebar-form-message-weight	Font weight of the text on Info page	300
–nv-sidebar-form-input-size	Font size of text inputs in Sidebar forms	16px
–nv-sidebar-citation-popup-display	Display property of citation popups. Set it to none to disable citation popups	block
–nv-sidebar-citation-tip-bg	Background of citation popup	--nv-surface-base
–nv-sidebar-citation-tip-fg	Foreground color of citation popup	--nv-on-surface
–nv-sidebar-splash-bg	Background color of splash page	--nv-surface-low
–nv-sidebar-form-page-bg	Background color of form input page	--nv-surface-low