Navbar

מה שנפתח מכפתור ההמבורגר, מתחת ל-1024px. שתי החלטות נפרדות: איך התפריט נפתח (מגירה או מסך מלא), ואיך נפתח תפריט משנה בתוכו (במקום או כמסך חדש). במחשב רואים את זה בתצוגת מובייל: F12 ואז Ctrl+Shift+M.

הפס העליון של כל אתר: לוגו, פריטים עם dropdown או mega-menu, כפתורים ותפריט מובייל. קומפוננטה אחת לכל הדמואים ולסטודיו, וההגדרות של כל אתר ב-nav-config שלו. הוא יושב ב-layout (בדמו עם כמה דפי בית: ב-layout של הגרסה). לא בונים header ביד לאתר חדש.

למטה ה-navbar האמיתי, עם scrollBehavior="static" כדי שיישב בתוך הדף. מ-1024px מעבר על "דוקס" פותח mega-menu, ו-"Navbar" מסומן כי זה העמוד הזה. מתחת ל-1024px רואים את ההמבורגר, והוא פותח מגירה עם כפתור סגירה משלה.

Props

configSiteNavConfigחובה

הלוגו, הפריטים, הכפתורים, ה-topbar ותפריט המובייל. הצורה ב-config/uk-nav-config.ts, וכל דמו מחזיק את שלו ב-nav-config.

scrollBehavior"fixed" | "sticky" | "static" | "auto-hide" | "overlay"ברירת מחדל "fixed"

overlay: שקוף מעל ה-hero, נגלל עם הדף ולא חוזר, כשתת-ניווט דביק תופס את הראש (דף הבית של הסטודיו). fixed: צף מעל התוכן, לדף בית עם hero מאחוריו. sticky: בתוך הזרימה ונדבק למעלה, ושומר את הגובה שלו (עמוד פנימי, בלי spacer). static: בזרימה ונגלל עם הדף, כשמשהו אחר תופס את הראש (תפריט משנה של עמוד). auto-hide: כמו fixed, ונעלם בגלילה למטה.

hideOnScrollbooleanברירת מחדל false

נעלם בגלילה למטה, חוזר בגלילה הראשונה למעלה. על fixed או על sticky; על sticky הגובה נשמר. כשהוא דלוק --uk-sticky-top הוא 0, אז דברים שנדבקים לא מחכים לפס.

startActivebooleanברירת מחדל false

מלא (המצב "נגלל") מהציור הראשון, ומוסיף את האטריבוט dark_global_navbar.

scrollThresholdnumberברירת מחדל 20

כמה פיקסלים של גלילה עד שהפס מתמלא וה-topbar יוצא.

inverseColorbooleanברירת מחדל false

טקסט לבן (.isInverse) עד הגלילה. אף אתר לא מעביר אותו: הדרך החיה היא data-navbar-light על עוטף הדף.

mobileMode"overlay" | "drawer"ברירת מחדל "overlay"

איך נפתח התפריט מתחת ל-1024px: מסך מלא, או מגירה מהצד.

drawerSide"left" | "right"ברירת מחדל "left"

הצד שממנו נכנסת המגירה. צד פיזי, לא לוגי: אתר בעברית שרוצה מגירה מימין כותב right.

hamburgerPosition"end" | "start"ברירת מחדל "end"

end: ההמבורגר בקצה, עם החיפוש ואייקוני ה-topbar. start: לפני הלוגו, והחיפוש לבד בקצה השני בתוך עיגול של 40px. להצמיד drawerSide מאותו צד (בעברית right).

swipeToClosebooleanברירת מחדל true

גרירה סוגרת את המגירה (ב-drawer בלבד). לכבות כשבתפריט יש משהו שנגלל לצד.

glassbooleanברירת מחדל false

מטושטש ושקוף, העמוד רץ מאחוריו ו---uk-sticky-top הוא 0. עם scrollBehavior="fixed".

floatingbooleanברירת מחדל false

גלולה צפה, 12px מהקצוות (20px מ-768px). לא יחד עם topbar.

showDarkModebooleanברירת מחדל true

כפתור שמש/ירח (UkDarkMode) ליד הכפתורים, בדסקטופ בלבד. כל הדמואים והסטודיו מעבירים false.

containerSize"default" | "small" | "large" | "expand"ברירת מחדל "default"

הקונטיינר בתוך הפס: 1200, 900, 1400 או כל הרוחב. אותו רוחב כמו הסקשנים של הדף, אחרת הלוגו והתוכן יושבים על שני קווים.

indicator"underline"

כבוי כשלא מעבירים. קו בתחתית הפס מתחת לפריט של העמוד, שזז בין העמודים. צבע --uk-nav-indicator-color (ברירת מחדל: צבע הטקסט), עובי --uk-nav-indicator-h (3px).

bottomBorderbooleanברירת מחדל false

קו של פיקסל בתחתית הפס (inset box-shadow, הגובה לא זז), בצבע הטקסט ב-10%. צבע --uk-navbar-bottom-border. לא על floating. בטלפון הוא גם מרחיק את פירורי הלחם ל-16px מתחתיו במקום 10.

defaultClassstringברירת מחדל ""

מוגדר בממשק, אבל הקומפוננטה לא משתמשת בו: אין לו השפעה.

כללים

• נקודת השבירה היא 1024px: מתחתיה המבורגר וגובה 64px, ממנה הקישורים וגובה 80px (--uk-navbar-h). כל ה-media queries של ה-navbar וה-lg: בקומפוננטה הם אותה נקודה, חוץ מהריווח של floating (md:, 768).
• containerSize כמו הקונטיינר של הסקשנים בדף: אתר שבנוי על uk-container-large מעביר large.
• hideOnScroll ו-auto-hide לא עובדים עם startActive: פס שמלא מההתחלה לא מגיב לגלילה (חוץ מה-topbar).

איפה זה חי: הסטודיו (start, drawer מימין, bottomBorder), חדר כושר (hideOnScroll), הכנס (indicator), סוכנות (static), עורך דין (containerSize large).

ה-navbar יושב ב-layout פעם אחת. דף שנפתח ב-hero כהה ורוצה navbar שקוף עם טקסט בהיר מוסיף שני אטריבוטים על העוטף שלו, וה-CSS עושה את השאר דרך :has(). בלי JS, בלי import ובלי !important. לדף בית עם תמונה כהה מאחורי פס fixed; עמוד פנימי עם sticky לא צריך אותם.

// a page with a dark hero: two attributes on its wrapper
export default function HomePage() {
  return (
    <div data-navbar-transparent data-navbar-light>
      <section>...dark hero...</section>
    </div>
  );
}

// an inner page (about, services, terms): nothing, the default

• data-navbar-transparent: הרקע שקוף (--uk-nav-bg: transparent).
• data-navbar-light: הטקסט בהיר (--uk-nav-text: var(--uk-navbar-is_inverse-color, #ffffff)), וסימון העמוד הנוכחי בצבע הטקסט ולא במותג.
• השניים בלתי תלויים: אפשר אחד מהם או את שניהם. בלי אף אחד, הניווט במצב הרגיל.

איך זה עובד

ב-app/globals.css שני משתנים, --uk-nav-bg ו---uk-nav-text, והניווט רק קורא אותם. שלושה מקורות דורסים אותם, והאחרון מנצח כי הוא יושב על הניווט עצמו. הלשוניות יורשות (color: inherit), אז שינוי של המשתנה מגיע לכולן בלי סלקטור לכל פריט.

/* 1. :root, the default */
:root { --uk-nav-bg: hsl(0 0% 100% / 0.15); --uk-nav-text: var(--foreground); }

/* 2. per page: the attributes on the wrapper */
body:has([data-navbar-transparent]) { --uk-nav-bg: transparent; }
body:has([data-navbar-light])       { --uk-nav-text: var(--uk-navbar-is_inverse-color, #ffffff); }

/* 3. scrolled: on the nav itself, so it wins */
[uk_navbar].isActive { --uk-nav-bg: var(--background); --uk-nav-text: var(--foreground); }

/* the navbar only reads */
[uk_navbar] { background-color: var(--uk-nav-bg); color: var(--uk-nav-text); }
[uk_navbar] .uk-nav-item, [uk_navbar] a { color: inherit; }

איפה זה חי: Lumiere, דף הבית.

המראה של אתרי Awwwards: בדסקטופ הבר הוא רק לוגו ועיגול המבורגר, ובלחיצה נפתח מסך מלא עם הקישורים בכותרות ענק, הדף הנוכחי בצבע המותג, ושורת רשתות למטה. יפה ולא שימושי: כל מעבר דף הוא שתי לחיצות, בשביל שלושה פריטים. אף פעם לא ברירת מחדל, רק כשלקוח מבקש. ואחד מהשניים: או הפריטים בבר, או התפריט מאחורי ההמבורגר, אף פעם לא שניהם.

<UkNavbar config={navConfig} menuOnDesktop scrollBehavior="sticky" />

// nav-config: the row at the foot of the menu (optional)
menuSocial: [
  { label: 'Instagram', href: '…' },
  { label: 'LinkedIn',  href: '…' },
],

ההמבורגר תקוע במקום, וזה כל הסוד

אין בתפריט כפתור סגירה משלו. הבר יושב מעל התפריט (z-index 50 מול 49), ולכן ההמבורגר נשאר גלוי, מסתובב ל-✕ (האנימציה הקיימת של הטלפון), והוא הסגירה. הוא לא זז מילימטר: כשהבר sticky הוא נדבק למעלה, וכשהבר static הדף לא נגלל בזמן שהתפריט פתוח (Lenis עוצר). בשני המקרים ה-✕ נמצא בדיוק איפה שלחצת. בלי מדידה, בלי כפתור שני, בלי מלחמת z-index בין הבר לתפריט.

• הבר נדבק אבל לא צובע רקע: מצב ה-active בגלילה לא משנה לו צבע, והוא עובר את העכבר לדף שמתחתיו (רק הלוגו והעיגול לחיצים). ולכן הוא לא מכסה כלום: --uk-sticky-top הוא 0, ואפקטים דביקים מקבלים את כל גובה המסך.
• העיגול: --uk-burger-size (64px), --uk-burger-bg, --uk-burger-fg (הפסים), ו---uk-burger-inset (20px אוויר מעליו ומתחתיו, שלא נדחף על הדף).
• מגנטי: נמשך קצת אל העכבר וחוזר, ב-mouse_move_on_element של ה-kit, בלי קוד תנועה חדש.

סוגי פתיחה: שתי צורות, והדפדפן עושה את השאר

התפריט הוא שכבה על כל המסך, ו-clip-path קובע איזה חלק ממנה רואים. סגור הוא צורה שלא מראה כלום, פתוח הוא צורה שמראה הכל, ו-transition מנגן ביניהן. הדפדפן מחשב לבד כל צורה שבאמצע. המחיר כמעט אפס: מאפיין CSS אחד שזז, בלי JavaScript בכל פריים, והתוכן מתחת לא נוגעים בו. סוג הפתיחה הוא רק איזה זוג צורות שמים, שתי שורות ב-CSS של האתר:

/* in the site's CSS, ON the menu itself (so --cx / --cy resolve) */
.uk-awwwards-menu {
  /* grow out of the hamburger: the theme of the animation home */
  --uk-awwwards-menu-from: circle(0px at var(--cx) var(--cy));
  --uk-awwwards-menu-to:   circle(var(--cr) at var(--cx) var(--cy));
  --uk-awwwards-menu-duration: 0.9s;
}

/* the default, nothing to write: a wipe down from the top */
--uk-awwwards-menu-from: inset(0 0 100% 0);
--uk-awwwards-menu-to:   inset(0);

/* a slit that opens from the middle, like an eye */
--uk-awwwards-menu-from: inset(50% 0 50% 0);
--uk-awwwards-menu-to:   inset(0);

• הכלל היחיד: שתי הצורות מאותו סוג (inset עם inset, circle עם circle, ופוליגון עם אותו מספר נקודות). אחרת אין מעבר, רק קפיצה. תריסים, למשל, הם פוליגון אחד של שמונה פסים, מרוחב 0 לרוחב מלא.
• הרכיב מודד ומפרסם: --cx ו---cy (מרכז ההמבורגר), --cr (המרחק לפינה הרחוקה). עיגול גדול מזה מבזבז חצי מהזמן מחוץ למסך ונראה כמו יריה.
• יש טריליון סוגי פתיחה, ואף אחד לא שימושי יותר מאחר, ורוב הפתיחה מוסתרת ממילא מאחורי המילים שעולות. לכן אתר בוחר ב-CSS, ושום prop לא נוסף ל-kit לכל סוג.
• שלוש שכבות שלא תלויות זו בזו: הפתיחה של המסך (clip-path), הכניסה של התוכן (כל מילה עולה ממסכה משלה, בתורה), והכפתור (spin ל-✕).

מעבר דף מהתפריט

לחיצה על קישור לדף אחר לא סוגרת את התפריט. הוא נשאר מעל הדף הישן עד שהחדש נטען, ואז נסגר: הסגירה שלו היא מעבר הדף. אם לדף החדש יש לאודר או מעבר משלו, הוא נכנס מעליו באותו צבע (גם התפריט וגם UkPageLoader הם --foreground כברירת מחדל), בלי קפיצה. מי שמשנה את --uk-awwwards-menu-bg משנה גם את --uk-page-loader-bg.

• העור: --uk-awwwards-menu-bg, -fg, -accent (הדף הנוכחי והמעבר מעל מילה), -size (גודל המילים).
• מעבר עכבר הוא לכל מילה: רק המילה שמתחת לעכבר מקבלת את צבע המותג, השאר נשארות כמו שהן.
• דסקטופ בלבד (1024 ומעלה). בטלפון התפריט הרגיל של UkNavbarMobile, מנגנון אחר.

איפה זה חי: סוכנות (ניגוב מלמעלה), סטודיו לאנימציה (עיגול מההמבורגר).

הכרטיס שיושב בתוך פאנל של mega-menu. בסיס אחד לכל הדמואים, כך ששינוי במקום אחד משנה את כולם. ברירת מחדל שורה (תמונה בצד, מלל לצידה, בעברית התמונה מימין). דרך class אפשר להפוך ל-סטאק (תמונה מעל), כולל רספונסיבי.

Layout: הפרופ layout

row שורה (ברירת מחדל) ·stack סטאק תמיד ·stack-md סטאק מ-768px ומעלה, שורה מתחת ·overlay-md הכותרת על התמונה מ-768px ומעלה; במגירה של הטלפון תמונה עגולה קטנה ליד שתי שורות. המבנה קבוע; דמו משנה רק את העור, בטוקנים --mmc-* (הרשימה בראש הקומפוננטה).

ברירת מחדל: row

EYEBROW

כותרת הכרטיס

מלל משני קצר

stack: תמיד תמונה מעל

EYEBROW

כותרת הכרטיס

מלל משני קצר

stack-md: הקטן/הגדל את החלון: מתחת ל-768px שורה, מעל סטאק.

EYEBROW

רספונסיבי

שורה במובייל, סטאק בדסקטופ

EYEBROW

md:stack

שורה במובייל, סטאק בדסקטופ