--- title: Overflow Nav description: A wrapping row of links kept to a number of lines, with the links that do not fit behind a button that counts them. visibility: guest draft: false --- # Overflow Nav `` shows a row of links that wraps onto at most `lines` rows, two by default. The links the rows have no room for move into a menu at the end of the last row, behind a button that shows how many it holds. The link marked `current` never moves into the menu, so the page on screen is always in the rows. It suits a row of open records, recently viewed pages or filters, where the number of links changes and the width of the screen decides how many fit. ## Usage Pass the links as `items`. Each one takes a `label` and an `href`, and at most one should be `current`. :::preview{title="A row of open records"} ::: ## Lines `lines` sets how many rows the links may take. With `lines="1"` the row never wraps, and everything that does not fit on one line goes into the menu. :::preview{title="One line"} ::: ## Links that navigate with Livewire Give an item `attributes` for anything its anchor should carry, such as `wire:navigate`. The same attributes go on the link in the rows and on its copy in the menu. ```blade ``` ## How it decides what fits The component lays every link out once, reads its width and replays the wrapping of the row in arithmetic. Links come off the end one at a time until the rest and the button fit in `lines` rows, so every row is full before anything moves into the menu. When only the current link would be left to move, nothing more moves, and the rows may then take one line more than `lines`. Three details keep that measurement steady, and they matter if you build something like it yourself: - **It measures in one task.** Showing every link through component state and measuring on the next tick lets the browser draw a frame in between; the row grows and shrinks, the resize observer sees it, and the row measures itself again on every frame. The component shows the links by hand, reads the widths and restores the styles before it sets any state. - **`x-show` shows on the next frame.** It hides at once but shows one animation frame later, so a link shown through state and measured right after still reads as hidden. The measurement reads the inline styles it set itself. - **Only the width asks for a new measurement.** The height changes every time a link moves into the menu, so the component measures again when the row's width changes or when links are added or removed, and never for a change of height. Without JavaScript every link is shown, in as many rows as it takes, and there is no button. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items` | `array` | `[]` | The links, in order. Each takes `label`, `href`, and optionally `current` (the page on screen, never moved into the menu) and `attributes` (extra attributes for the anchor) | | `lines` | `int` | `2` | How many rows the links may take before the rest move into the menu | | `label` | `string\|null` | `null` | The landmark's name. With a label the row is a `