Share via


WinJS.UI.NavBarContainer object

[NavBarContainer is no longer available for use as of Windows Library for JavaScript (WinJS) 4.2. Instead, use SplitViewCommand. ]

Container for a group of NavBarCommand objects in a NavBar.

Explore this functionality in more depth as part of our App features, start to finish series: Flat navigation, start to finish (HTML) and Hierarchical navigation, start to finish (HTML)

Syntax

<div 
    data-win-control="WinJS.UI.NavBarContainer">
</div>
var object = new WinJS.UI.NavBarContainer();

Members

The NavBarContainer object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The NavBarContainer object has these constructors.

Constructor Description
NavBarContainer

Creates a new NavBarContainer.

 

Events

The NavBarContainer object has these events.

Event Description
oninvoked

Occurs when a child NavBarCommand object's click event fires.

onsplittoggle

Occurs when the splitButton of a child NavBarCommand is opened or closed. A split button is toggled when the user navigates to another page or opens another split button.

 

Methods

The NavBarContainer object has these methods.

Method Description
addEventListener

Registers an event handler for the specified event.

dispatchEvent

Raises an event of the specified type and with additional properties.

dispose

Releases resources held by this NavBarContainer. Call this method when the NavBarContainer is no longer needed. After calling this method, the NavBarCommand becomes unusable.

forceLayout

Forces the NavBarContainer to update its layout. Use this function when making the NavBarContainer visible again after you set its style.display property to "none".

removeEventListener

Removes an event handler registered through the addEventListener method.

 

Properties

The NavBarContainer object has these properties.

Property Access type Description

currentIndex

Read/write

Gets or sets the index of the current (focused) item.

data

Read/write

Gets or sets a WinJS.Binding.List that generates NavBarCommand objects.

element

Read/write

Gets the DOM element that hosts the NavBarContainer.

fixedSize

Read/write

Gets or sets a value that specifies whether NavBarCommand objects in this container use a fixed or dynamic width.

layout

Read/write

Gets or sets a value that specifies whether the NavBarContainer has a horizontal or vertical layout.

maxRows

Read/write

Gets or sets a value that specifies how many rows of navigation commands to display on a page.

template

Read/write

Gets or sets the WinJS.Binding.Template or templating function that creates the DOM elements for each item in the data source. Each item can contain multiple elements, but it must have a single root element.

 

Remarks

CSS classes

To customize the NavBarContainer, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

CSS class Description

win-navbarcontainer

Styles the entire NavBarContainer.

win-navbarcontainer-horizontal

Styles the NavBarContainer when it has a horizontal layout.

win-navbarcontainer-navarrow

Styles both page arrows in the page indicator box.

win-navbarcontainer-navleft

Styles the left page arrow.

win-navbarcontainer-navright

Styles the right page arrow.

win-navbarcontainer-pageindicator-box

Styles the page indicator box.

win-navbarcontainer-pageindicator-current

Styles the page indicator box's current page indicator.

win-navbarcontainer-surface

Styles the area that contains NavBarCommand objects.

win-navbarcontainer-vertical

Styles a NavBarContainer when has a vertical layout.

win-navbarcontainer-viewport

Styles the viewport, which includes the NavBarContainer and the scrollbar.

 

Requirements

Minimum supported client

Windows 8.1 [Windows Store apps only]

Minimum supported server

Windows Server 2012 R2 [Windows Store apps only]

Minimum supported phone

None supported

Namespace

WinJS.UI

Library

Ui.js

See also

WinJS.UI Namespace

NavBar

NavBarCommand

BackButton

AppBar

Your first app - Part 3: PageControl objects and navigation

Navigating between pages (HTML)

Adding app bars

Adding nav bars

HTML AppBar control sample

HTML NavBar control sample

Navigation and navigation history sample

Designers

Command patterns

Navigation patterns

Guidelines for app bars

Bottom app bar

Top app bar