app-ui / lists / stacked-lists
Narrow With Sticky Headings
12-narrow-with-sticky-headings.jsx
const directory = {
A: [
{
id: 1,
name: 'Leslie Abbott',
email: 'leslie.abbott@example.com',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 2,
name: 'Hector Adams',
email: 'hector.adams@example.com',
imageUrl:
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 3,
name: 'Blake Alexander',
email: 'blake.alexander@example.com',
imageUrl:
'https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 4,
name: 'Fabricio Andrews',
email: 'fabricio.andrews@example.com',
imageUrl:
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
B: [
{
id: 5,
name: 'Angela Beaver',
email: 'angela.beaver@example.com',
imageUrl:
'https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 6,
name: 'Yvette Blanchard',
email: 'yvette.blanchard@example.com',
imageUrl:
'https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 7,
name: 'Lawrence Brooks',
email: 'lawrence.brooks@example.com',
imageUrl:
'https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
C: [
{
id: 8,
name: 'Jeffrey Clark',
email: 'jeffrey.clark@example.com',
imageUrl:
'https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 9,
name: 'Kathryn Cooper',
email: 'kathryn.cooper@example.com',
imageUrl:
'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
E: [
{
id: 10,
name: 'Alicia Edwards',
email: 'alicia.edwards@example.com',
imageUrl:
'https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 11,
name: 'Benjamin Emerson',
email: 'benjamin.emerson@example.com',
imageUrl:
'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 12,
name: 'Jillian Erics',
email: 'jillian.erics@example.com',
imageUrl:
'https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 13,
name: 'Chelsea Evans',
email: 'chelsea.evans@example.com',
imageUrl:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
G: [
{
id: 14,
name: 'Michael Gillard',
email: 'micheal.gillard@example.com',
imageUrl:
'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 15,
name: 'Dries Giuessepe',
email: 'dries.giuessepe@example.com',
imageUrl:
'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
M: [
{
id: 16,
name: 'Jenny Harrison',
email: 'jenny.harrison@example.com',
imageUrl:
'https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 17,
name: 'Lindsay Hatley',
email: 'lindsay.hatley@example.com',
imageUrl:
'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 18,
name: 'Anna Hill',
email: 'anna.hill@example.com',
imageUrl:
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
S: [
{
id: 19,
name: 'Courtney Samuels',
email: 'courtney.samuels@example.com',
imageUrl:
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 20,
name: 'Tom Simpson',
email: 'tom.simpson@example.com',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
T: [
{
id: 21,
name: 'Floyd Thompson',
email: 'floyd.thompson@example.com',
imageUrl:
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 22,
name: 'Leonard Timmons',
email: 'leonard.timmons@example.com',
imageUrl:
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 23,
name: 'Whitney Trudeau',
email: 'whitney.trudeau@example.com',
imageUrl:
'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
W: [
{
id: 24,
name: 'Kristin Watson',
email: 'kristin.watson@example.com',
imageUrl:
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 25,
name: 'Emily Wilson',
email: 'emily.wilson@example.com',
imageUrl:
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
Y: [
{
id: 26,
name: 'Emma Young',
email: 'emma.young@example.com',
imageUrl:
'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
],
}
export default function Example() {
return (
<nav aria-label="Directory" className="h-full overflow-y-auto">
{Object.keys(directory).map((letter) => (
<div key={letter} className="relative">
<div className="sticky top-0 z-10 border-y border-t-gray-100 border-b-gray-200 bg-gray-50 px-3 py-1.5 text-sm/6 font-semibold text-gray-900 dark:border-t-white/5 dark:border-b-white/10 dark:bg-gray-900 dark:text-white dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-white/5">
<h3 className="relative">{letter}</h3>
</div>
<ul role="list" className="divide-y divide-gray-100 dark:divide-white/5">
{directory[letter].map((person) => (
<li key={person.email} className="flex gap-x-4 px-3 py-5">
<img
alt=""
src={person.imageUrl}
className="size-12 flex-none rounded-full bg-gray-50 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10"
/>
<div className="min-w-0">
<p className="text-sm/6 font-semibold text-gray-900 dark:text-white">{person.name}</p>
<p className="mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400">{person.email}</p>
</div>
</li>
))}
</ul>
</div>
))}
</nav>
)
}