Navigation
Tabs allow test takers to navigate non-linearly through chunks of related content. (For example, items in a block are presented in a tabbed interface.)
Tabs are laid out horizontally and typically left-justified, though item tabs are right-justified.
Tab States
Tabs have the following states by default.
- Unanswered. The default state. Tab has a gray
#F5F5F5background. - Answered. Visible when the associated item has been answered. Tab background is darkened.
- Selected. Visible when the associated item is on-screen. Tab background changes to white
#FFFFFF, tab height increases, and the bottom border is removed to connect the tab to the content area. - Hover. Visible when the cursor is over the tab. Tab background is lightened.
- Disabled. Visible when the tab is inactive (e.g., when a modal system tool like Scratchwork is enabled). Tab label color is dimmed to indicate that the tab is inactive.
Tabs receive the default cursor in the selected and disabled states, and the pointer cursor in all other states.
The following demo presents the default tab state.
To view alternative presentations and styling, use the Change Theme 
and Read Aloud 
buttons in the upper-right of the screen.
Tab Pagination
If there are more tabs than will fit on screen, tab pagination buttons appear that allow the test taker to page through the tabs as needed. Tab pagination buttons use the bare button style. (See the Buttons page for details.) In addition, a drop shadow is added so that the buttons appear to be above the tab tray on the z-axis.
Behavioral details:
- Pressing a tab pagination button will cause the tab tray to shift one screen width in the selected direction by default.
- If there aren’t sufficient tabs off-screen to fill a screen width, the tab tray shifts so that the last off-screen tab is adjacent to the selected tab pagination button.
- If the test taker navigates to an off-screen tab (e.g., by pressing the Back or Next button), the tab tray shifts so that the selected tab is on-screen.
The following demo presents tabs with the tab pagination buttons.
To view alternative presentations and styling, use the Change Theme button in the upper-right of the screen.
Tabs and Navigation in SBTs 
The styling of tabs in scenario-based tasks (SBTs) may depart from the defaults described above if needed to match the look and feel of the rest of the task. Navigation within SBTs should generally be performed using Next or Back buttons. Tabs are intended to provide user access to information that is split across multiple display panels. In general, NAEP SBTs are linear - the student can only move forward or back in a pre-determined, step-by-step sequence. This is the default navigational functionality.
Scrollbars
Scrollbars are provided when a continuous unit of content (e.g., an item) extends beyond the available space.
To increase salience, especially for test takers less familiar with digital environments, scrollbars are displayed in blue (#246BB2 for buttons and thumb, #EBF5FF for track) in the default theme. Scrollbar colors in other themes were selected to balance salience with alignment to the theme.
Vertical scrollbars are 20px wide, and horizontal scrollbars are 20px tall. Scrollbar buttons are 20px square, and the corners of the buttons and scrollbar thumb are rounded.
The following demo presents a content container with a vertical scrollbar.
To view alternative presentations and styling, use the Change Theme button in the upper-right of the screen.
Pagination
Pagination is used in lieu of scrolling when content requires the preservation of distinct pages (e.g., to preserve a magazine-style layout in a reading stimulus passage).
When navigating to different pages, pages should transition with a smooth slide animation.
Pagination Buttons
When on a screen with a non-white background, pagination buttons are placed in an off-white #FAFAFA lozenge to differentiate them from surrounding content. The lozenge is aligned to the left edge of the page and vertically centered.
Previous Page and Next Page buttons are provided, along with one Page Number button for each page of content. Selecting a Page Number button will navigate the content to the associated page.
Previous Page and Next Page buttons use the primary filled button style. They have the chevron-up and chevron-down icons, respectively.
Page Number buttons use the secondary filled button style, with an added selected state to indicate which page is currently being displayed. When selected, the button background color is light blue #c4e0f8 , and the border is transparent.
The following demo presents a content container with associated pagination buttons.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Locking of Paginated Content
In SBTs, it is sometimes desirable to hide one or more pages of stimulus content until the test taker takes a particular action. In such cases, the hidden pages are initially locked (i.e., inaccessible).
To indicate to test takers that some content is not yet available, the Page Number button(s) for the locked page(s) are replaced with a lock icon. When the test taker takes the action needed to unlock the page(s), the lock icon is removed, and the page(s) become accessible.
The following demo presents a content container with associated pagination buttons featuring a lock icon.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Tabs