Resize and scroll
cursor: ns-resize in CSS: the up-down resize arrow
ns-resize is the up-down double arrow. It says 'drag this edge up or down'.
cursor: ns-resize; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one. What it shows
Windows draws Vertical Resize (the SizeNS role, aero_ns.cur). macOS shows its up-down resize arrow.
Usage
When to use it
Use it for
- Top and bottom edges of resizable boxes, drawers and bottom sheets.
- The start and end handles of calendar events in a day view.
- A vertical before-and-after comparison that you drag up and down.
Avoid it for
- Row borders in spreadsheets. row-resize is the convention.
- Content that scrolls vertically. Scrolling needs no special cursor.
Code
Copy the snippet
.drawer-edge { cursor: ns-resize; }<div class="drawer">
<div class="drawer-edge" aria-label="Drag to resize"></div>Console output
</div>Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 3 |
| Safari on iOS | no |
| Chrome on Android | 18 |
| System | Matching cursor |
|---|---|
| Windows role | SizeNS |
| Windows file | aero_ns.cur |
| macOS | Resize up-down |
Watch out
Gotchas
- On Windows, n-resize, s-resize and ns-resize all look the same.
- Handles need a hit area of at least 8 px. A 1 px line is too hard to catch.
Free cursors
A custom ns-resize cursor
The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.
FAQ
Questions
- Which Windows cursor is ns-resize?
- Vertical Resize, stored as SizeNS (aero_ns.cur). Windows also uses it for n-resize and s-resize.
- Does the browser use ns-resize by itself?
- Yes. Chrome shows it over the grip of an element with resize: vertical.
- Should a bottom sheet use ns-resize or row-resize?
- ns-resize when people drag the sheet's own edge. row-resize when they drag a bar that splits two areas.
More