AdwNavigationSplitView

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

<picture> <source srcset="navigation-split-view-dark.png" media="(prefers-color-scheme: dark)"> <img src="navigation-split-view.png" alt="navigation-split-view"> </picture> <picture> <source srcset="navigation-split-view-collapsed-dark.png" media="(prefers-color-scheme: dark)"> <img src="navigation-split-view-collapsed.png" alt="navigation-split-view-collapsed"> </picture>

adw.navigation_split_view.NavigationSplitView has two class@NavigationPage children: sidebar and content, and displays them side by side.

When property@NavigationSplitView:collapsed is set to TRUE, it instead puts both children inside an class@NavigationView. The property@NavigationSplitView:show-content controls which child is visible while collapsed.

See also class@OverlaySplitView.

adw.navigation_split_view.NavigationSplitView is typically used together with an class@Breakpoint 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, adw.navigation_split_view.NavigationSplitView changes the sidebar width depending on its own width.

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

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

The minimum and maximum sizes are using the length unit specified with the property@NavigationSplitView: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 adw.navigation_split_view.NavigationSplitView, class@HeaderBar 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 class@NavigationView documentation for details.

Actions

adw.navigation_split_view.NavigationSplitView defines the same actions as adw.navigation_view.NavigationView, 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 property@NavigationSplitView:show-content to TRUE.

• navigation.pop doesn't take any parameters and sets

property@NavigationSplitView:show-content to FALSE.

adw.navigation_split_view.NavigationSplitView as gtk.buildable.Buildable

The adw.navigation_split_view.NavigationSplitView implementation of the gtk.buildable.Buildable 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

adw.navigation_split_view.NavigationSplitView 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

adw.navigation_split_view.NavigationSplitView uses the gtk.types.AccessibleRole.Group role.