AdwNavigationSplitView

A widget presenting sidebar and content side by side or as a navigation view.

AdwNavigationSplitView has two AdwNavigationPage children: sidebar and content, and displays them side by side.

When AdwNavigationSplitView:collapsed is set to TRUE, it instead puts both children inside an AdwNavigationView. The AdwNavigationSplitView:show-content controls which child is visible while collapsed.

See also AdwOverlaySplitView.

AdwNavigationSplitView is typically used together with an AdwBreakpoint setting the collapsed property to TRUE on small widths, as follows:

<object class="AdwWindow">
  <property name="width-request">280</property>
  <property name="height-request">200</property>
  <property name="default-width">800</property>
  <property name="default-height">800</property>
  <child>
    <object class="AdwBreakpoint">
      <condition>max-width: 400sp</condition>
      <setter object="split_view" property="collapsed">True</setter>
    </object>
  </child>
  <property name="content">
    <object class="AdwNavigationSplitView" id="split_view">
      <property name="sidebar">
        <object class="AdwNavigationPage">
          <property name="title" translatable="yes">Sidebar</property>
          <property name="child">
            <!-- ... -->
          </property>
        </object>
      </property>
      <property name="content">
        <object class="AdwNavigationPage">
          <property name="title" translatable="yes">Content</property>
          <property name="child">
            <!-- ... -->
          </property>
        </object>
      </property>
    </object>
  </property>
</object>

Sizing

When not collapsed, AdwNavigationSplitView changes the sidebar width depending on its own width.

If possible, it tries to allocate a fraction of the total width, controlled with the AdwNavigationSplitView:sidebar-width-fraction property.

The sidebar also has minimum and maximum sizes, controlled with the AdwNavigationSplitView:min-sidebar-width and AdwNavigationSplitView:max-sidebar-width properties.

The minimum and maximum sizes are using the length unit specified with the AdwNavigationSplitView:sidebar-width-unit.

By default, sidebar is using 25% of the total width, with 180sp as the minimum size and 280sp as the maximum size.

Header Bar Integration

When used inside AdwNavigationSplitView, AdwHeaderBar will automatically hide the window buttons in the middle.

When collapsed, it also displays a back button for the content widget, as well as the page titles. See AdwNavigationView documentation for details.

Actions

AdwNavigationSplitView defines the same actions as AdwNavigationView, but they can be used even when the split view is not collapsed:

• navigation.push takes a string parameter specifying the tag of the page to push. If it matches the tag of the content widget, it sets AdwNavigationSplitView:show-content to TRUE.

• navigation.pop doesn’t take any parameters and sets AdwNavigationSplitView:show-content to FALSE.

AdwNavigationSplitView as GtkBuildable

The AdwNavigationSplitView implementation of the GtkBuildable interface supports setting the sidebar widget by specifying “sidebar” as the “type” attribute of a <child> element, Specifying “content” child type or omitting it results in setting the content widget.

CSS nodes

AdwNavigationSplitView has a single CSS node with the name navigation-split-view.

When collapsed, it contains a child node with the name navigation-view containing both children.

navigation-split-view
╰── navigation-view
    ├── [sidebar child]
    ╰── [content child]

When not collapsed, it contains two nodes with the name widget, one with the .sidebar-pane style class, the other one with .content-view style class, containing the sidebar and content children respectively.

navigation-split-view
├── widget.sidebar-pane
│   ╰── [sidebar child]
╰── widget.content-pane
    ╰── [content child]

Accessibility

AdwNavigationSplitView uses the GTK_ACCESSIBLE_ROLE_GROUP role.